只选择一个复选框

Question

我在一个小项目中使用 ionic 2 和 angular 2。我希望用户只能从提供的复选框中选择一个复选框。 I added and action listener whenever a checkbox is checked but not sure on what the function should really execute.

    <ion-item *ngFor="let category of categories; let i = index">
      <ion-label [innerHTML]="category.name"></ion-label>
      <ion-checkbox color="royal" checked="category.value" (click)="Selection(i,categories);"></ion-checkbox>
  </ion-item>

这是 JSON 对象的示例

    categories = [
    {
      name: 'Car Keys',
      value: 'false'
  },
  {
      name: 'Phone',
      value: 'false'
  },
  {
      name: 'ID/Drivers License',
      value: 'false'
  },
  {   name: 'Wallet',
      value: 'false'
  },
  {   name: 'Other',
      value: 'false'
  }]

我正在将类别索引传递给函数，但不确定还要检查什么。任何帮助将不胜感激。

Answer 1

这可以使用单选按钮最简单地实现，但如果您想使用复选框，这意味着您应该在选中一个复选框时禁用其他复选框。

您拥有的数组，将value 属性更改为布尔值false，我们可以使用它。 Then when a checkbox is chosen, it would invoke your Selection-function, which sets the other checkboxes' value to to true when one is chosen, keeping the one chosen as false.当用户取消选中复选框时，所有复选框值再次为false。为此，我们使用唯一名称属性，该属性被传递给函数，并且当我们迭代类别以查看哪个类别被检查时。所以你的功能：

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

在您的模板中添加禁用选项：

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

Plunker