javascript - 只选择一个复选框

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 属性更改为 bool 值 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>

Plunker