在Ionic 3中僅允許選擇一項檢查，而禁用其他選項

Question

我一直在關注這個解決方案

如何使用ionic 2和angular2從多個復選框中僅選擇單個復選框，其工作正常，但問題是

當我選中任何復選框時，其他復選框將被禁用（這是我想要的），但是如果我取消選中同一復選框，則其他復選框仍將保持禁用狀態。 取消選中復選框后如何啟用它們？

這是我的代碼.ts文件

export class list {
checkedIdx = -1;
}

.html文件

<ion-card class="ion-card">
  <ion-item *ngFor="let item of options; let i=index">
    <ion-label>{{item}}</ion-label>
    <ion-checkbox item-left [ngModel]="checkedIdx == i"(ngModelChange)="$event ? checkedIdx = i : checkedIdx = -1" [disabled]="checkedIdx >= 0 && checkedIdx != i"></ion-checkbox>
  </ion-item>
</ion-card>

Answer 1

檢查 工作堆棧

一次只能選擇一個復選框

您的component.html應該是這樣的：〜

<ion-card class="ion-card">
    <ion-item *ngFor="let category of categories; let i = index">
        <ion-label>{{category.name}}</ion-label>
        <ion-checkbox 
    [disabled]="categories[i].value" 
    (click)="selection(category.name);">
        </ion-checkbox>
    </ion-item>
</ion-card>

您的component.ts可能是這樣的：〜

  selection(name: string) {
    this.categories.forEach(x => {
      if (x.name !== name) {
        x.value = !x.value
      }
    })
  }

希望這會有所幫助！