How to set ionic checkbox selected only one?

Inforage 0
Viewed 40

How can only set it only can be select one checkbox only? //below image show current can be select multi checkbox.

//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);
}

Problem

ionic-framework vue.js
3 Answers

By adding an ID the elements when doing the loop. Each of those items need an id attached to be able to target specific item.

StackoverBlows0

This is my answer

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

enter image description here

Inforage0

I would rather use ion-radio-group and ion-radio for this task as the requisite is that only one of the rows can be selected:

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

And declare selection in your script's data section so its value is updated reactively.

See ion-radio docs here: https://ionicframework.com/docs/api/radio

gsim0
Related