ユーザーが2つしかチェックできないチェックボックスを制限する方法は？

Question

HTMLファイル

<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これは私のチェックボックス用のHTMLファイルとTSファイルである

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

ファイルには、私は、ユーザーがチェックボックスをチェックして、値を印刷できるようにするために管理しますチェックボックスを2つしかチェックできないチェックボックスを制限したいと考えています。どうすればいいのですか？

Answer 1

checked()にチェックを入れて、2つの項目がチェックされているかどうかを確認し、ブール変数を使用してチェックボックスを有効または無効にすることができます。

あなたのTSファイルで

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

、偽としてisCheckboxDisabledを設定し、

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