javascript - 如何限制复选框在某些条件后进行选择

Question

我在 Angular 5 中使用 ngModel，这里是 Html

 <span *ngFor="let id of Ids">
  <input class="checkbox" type="checkbox" [(ngModel)]="strManyModel[id]"   (change)="setValue($event)" [value]="id">
 </span>

这是typeScript

setValue(e){
   if(selectedChkBox > 5){
    this.strManyModel[e.target.value] = false;// if check box more than 5 selected , unselect this one
  }
}

我想在选择 5 个复选框后限制复选框的选择。第一次点击一旦选择了5，我就可以限制为复选框来选择，但同时如果再次选择它就会选择。想要限制复选框在选中 5 次后才选中。一次最多可以从多个复选框中选择 5 个。仅当取消选中在选择第 5 种情况时选择的任何较旧的一项时，才可以选择其他一项。

Answer 1

创建额外的类属性，例如:

public maxElementCheckbox = 5;

然后使用一个函数:

public disableCheckbox(): boolean {
  return Ids.length >= this.maxElementCheckbox;
}

模板是:

<input class="checkbox" [disabled]="disableCheckbox()" type="checkbox" [(ngModel)]="strManyModel[id]" (change)="setValue($event, i)" [value]="id">