Javascript 如何限制复选框在某些条件后选择

我在Angular 5中使用了

ngModel

，这里是

Html

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

---

我想在选中5个复选框后将复选框限制为选中。在第一次单击时，一旦选择了5，我就可以将复选框限制为要选择的复选框，但同时，如果再次选择，它将被选中。要将复选框限制为选中5后再选中。一次最多可选中5个复选框，从多个复选框中进行选择。只有在选择了案例5中选择的任何较旧的选项时，才能选择其他选项。

可能的解决方案可能是：

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

 setValue(e, index){
         if(Ids.length >= 5){
          strManyModel[index] = false;
        }
     }

设置值（e，索引）{
如果（id.length>=5）{
strManyModel[index]=false；
}
}

创建其他类属性，如：

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">

---

如果我理解正确，您希望在选择5时禁用其他复选框，并将未选中的复选框保持为禁用状态，直到复选框小于5

您可以做的是，在数组中设置对象，选中一个

属性来跟踪选中状态，并引入一个新的布尔值和一个“计数器”来跟踪选中的复选框数量。禁用未选中的复选框，并且在最多选择5个复选框时：

<div *ngFor="let chk of checkBox; let i = index">
  <input [(ngModel)]="chk.checked" 
         type="checkbox" 
         [disabled]="!chk.checked && maxNo" 
         (change)="onChange($event.target.checked)">{{chk.name}}
</div>

这里有一个

对不起，你的问题真的很难理解。您想将输入列表限制为最多5个复选框吗？@ForestG yes请查看编辑这不是一个坏主意，不值得进行下一票或其他任何操作，但是如果选择了5个复选框，并且有人想取消选中某个旧复选框，并想选择其他复选框，用户体验将是次对等的。他将如何做到这一点，如果所有复选框都被禁用智能解决方法\m/这正是所需的：）这应该是选定的答案！
<div *ngFor="let chk of checkBox; let i = index">
  <input [(ngModel)]="chk.checked" 
         type="checkbox" 
         [disabled]="!chk.checked && maxNo" 
         (change)="onChange($event.target.checked)">{{chk.name}}
</div>

onChange(isChecked: boolean) {
  isChecked ? this.amt++ : this.amt--;
  this.maxNo = this.amt === 5 ? true : false;
}