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

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

这是我的复选框的html文件和ts文件，我设法允许用户选中复选框并打印复选框的值，但我想限制复选框，用户只能检查其中的两个。我该怎么做？

Answer 1

您可以检查checked()以查看是否检查了两个项目并使用布尔变量来启用/禁用复选框。

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

在您的TS文件中，将isCheckboxDisabled设置为false，

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

如何限制用户只能检查2个复选框的复选框？

1 个答案: