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

Answer 2

可能的解决方案可能是：

 <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;
        }
     }

Answer 3

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

你可以做什么，在你的数组中有对象，使用checked属性来跟踪检查状态，以及引入一个新的布尔值和一个＆＃34;计数器＆＃34;跟踪检查了多少个复选框。禁用未选中的复选框以及最多选择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>

数组由具有name和checked属性的对象组成。然后，您的更改事件将根据选中的复选框递增/递减，并切换布尔标志maxNo：

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

这是

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

3 个答案:

StackBlitz