Wie schränken Sie Checkboxen ein, bei denen der Benutzer nur 2 davon überprüfen kann?

Question

HTML-Datei

<ion-list *ngIf="items" > 
    <ion-item *ngFor="let driver of items; let i = index"> 
     <ion-label>{{driver.name}}</ion-label> 
     <ion-checkbox [(ngModel)]="driver.checked" (ionChange)="checked(driver)" item-right></ion-checkbox> 
    </ion-item> 
</ion-list> 

TS für meine Checkbox

checked(driver) { 
    if (driver.checked === true) { 
     this.checkedDrivers.push(driver); 
    } else if (driver.checked === false) { 
     this.checkedDrivers.splice(this.checkedDrivers.indexOf(driver), 1); 
    } 
} 

Dies ist die HTML-Datei und ts-Datei Datei, schaffe ich es Benutzer zu ermöglichen, die Kontrollkästchen zu überprüfen und den Wert drucken der Checkboxen, aber ich möchte die Checkboxen beschränken, wo der Benutzer nur zwei davon checken kann. Wie mache ich es?

Answer 1

Sie könnten einchecken checked(), um zu sehen, ob zwei Elemente überprüft werden und verwenden Sie eine boolesche Variable, um die Kontrollkästchen zu aktivieren/deaktivieren.

<ion-list *ngIf="items" > 
    <ion-item *ngFor="let driver of items; let i = index"> 
     <ion-label>{{driver.name}}</ion-label> 
     <ion-checkbox [(ngModel)]="driver.checked" [disabled]="isCheckboxDisabled" (ionChange)="checked(driver)" item-right></ion-checkbox> 
    </ion-item> 
</ion-list> 

In Ihrem TS-Datei, setzen isCheckboxDisabled als falsch,

isCheckboxDisabled:boolean=false; 

checked(driver) { 
    if (driver.checked === true) { 
     this.checkedDrivers.push(driver); 
    } else if (driver.checked === false) { 
     this.checkedDrivers.splice(this.checkedDrivers.indexOf(driver), 1); 
    } 

    //check for two selected. 
    if(this.items.filter(driver=> driver.checked).length===2){ 
     this.isCheckboxDisabled=true; 
    } 
}