仅选中一个复选框

Question

我正在一个小项目中使用ionic 2和angular 2。 我希望用户只能从提供的复选框中选择一个复选框。每当选中复选框但不确定函数应该真正执行什么时，我都会添加和操作侦听器。

    <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，我们可以使用它。然后，当选中一个复选框时，它将调用您的 Selection -函数，该函数将其他复选框的值设置为 true 当选择一个复选框时，将选中的复选框保留为 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>

普伦克