在 Ionic 3 中只允许一个检查选项，而其他选项禁用

Question

我一直在关注这个解决方案

它工作正常，但问题是

当我选中任何复选框时，另一个被禁用（这正是我想要的），但如果我取消选中同一个复选框，另一个仍然被禁用。取消选中复选框后如何启用它们？

这是我的代码 .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

CHECK WORKING STACKBLITZ

一次只能选择一个复选框

你的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
      }
    })
  }

希望对您有所帮助！

在 Ionic 3 中只允许一个检查选项，而其他选项禁用

Allow only one selection of check while other option disable in Ionic 3

checkbox

typescript

ionic3

angular

一次只能选择一个复选框