如何在角7中将复选框选择限制为最多3个

Question

在角度上如何限制复选框选择最多3个

<ion-item *ngFor="let check of checks;">
   <ion-label>{check.name}}</ion-label>
   <ion-checkbox slot="start" [value]="check.value" (click)="selectChecked()">
</ion-checkbox></ion-item>

checks = [{name: "item 1"},.... ]

Answer 1

您可以尝试这样

page.component.html

<ion-item *ngFor="let check of checks;">
   <ion-label>{{check.name}}</ion-label>
   <ion-checkbox [disabled]="check.disabled" slot="start" [(ngModel)]="check.checked" (ionChange)="change($event)" (click)="selectChecked()">
</ion-checkbox></ion-item>

page.component.ts

checks = [{name: "item 1", checked:false, disabled:false}, 
    {name: "item 2", checked:false, disabled:false},
    {name: "item 3", checked:false, disabled:false},
    {name: "item 4", checked:false, disabled:false},
    {name: "item 5", checked:false, disabled:false},
    {name: "item 6", checked:false, disabled:false},
    {name: "item 7", checked:false, disabled:false},
];

change(event){
  let val = event.checked;
  var filteredArray  = this.checks.filter(( obj )=> {
    return obj.checked === true;
  });
  if(filteredArray.length >= 3){
    this.checks.filter(( obj )=> {
      if(obj.checked === false) obj.disabled = true;
    });
  }
  else{
    this.checks.filter(( obj )=> {
      if(obj.checked === false) obj.disabled = false;
    });
  }
}

演示：https://stackblitz.com/edit/ionic-xhju7w