如何设置离子复选框只选择一个？答案

【问题标题】：How to set ionic checkbox selected only one?如何设置离子复选框只选择一个？
【发布时间】：2022-09-22 21:50:40
【问题描述】：

如何只能设置它只能选择一个复选框？ //下图显示当前可以选择多个复选框。

//html
<td><ion-checkbox :value=\"item.cCouponCode\" @ionChange=\"GetCode($event)\" checked=\"false\"></ion-checkbox></td>

//typescript
GetCode($event){
this.SelectedVoucherCode = $event.detail.value;
console.log($event);
}

标签： vue.js ionic-framework

【解决方案1】：

通过在执行循环时添加元素的 ID。这些项目中的每一个都需要附加一个 id 才能定位特定项目。

【讨论】：

【解决方案2】：

这是我的答案

//typescript
if(this.SelectedList.length >=1){
        $event.target.checked = false;
        alert('You cant selected more than one voucher/ '+ 'You already selected'+this.SelectedList[0].Code);
}
else{
    this.SelectedList.push({'Code':$event.detail.value});
}

//html
<ion-checkbox :value="item.cCouponCode" @ionChange="GetCode($event)" checked="false" :id="index">

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

我宁愿使用ion-radio-group 和ion-radio 来完成此任务，因为前提条件是只能选择其中一行：

<ion-radio-group :value="selection">
  <td v-for="item in items">
    <ion-radio :value="item.cCouponCode" />
  </td>
</ion-radio-group>

并在脚本的数据部分中声明selection，以便响应式更新其值。

请参阅此处的ion-radio 文档：https://ionicframework.com/docs/api/radio

【讨论】：