CODEWITHSUNDEEP
ionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to restrict user to select only one item from the item list in Ionic

I am working In Ionic App and I have shown the item list in which I have the checkbox for the item selection. User can select only one item but the problem is that, In my item list user is able to select all items.

This is my shopping.html:

<ion-list *ngFor="let itm of shippingdetails">
          <ion-item-divider>
            <ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
            <!-- <ion-radio slot="start"></ion-radio> -->
            <!-- <ion-toggle slot="start"></ion-toggle> -->
            <ion-label>
            <h2>{{itm.name}}</h2>
            <p>{{itm.mobile}}</p>
            <p>{{itm.state}}, {{itm.city}}</p>
            <p>{{itm.address}}</p>
            <p>Pincode: {{itm.pincode}}</p>
            </ion-label>
            <button ion-button outline item-end>
              <ion-icon name="create"></ion-icon>
            </button>
            <button ion-button outline item-end>
              <ion-icon name="trash"></ion-icon>
            </button>
          </ion-item-divider>
</ion-list>

In this, I am showing the check-boxes with the items where user can select the item.

This is my shopping.ts:

isCheckboxDisabled:boolean=false;
selectCP(itm){

}

I am not able to make the logic for that. In my html, user can select all the items. Any help is much appreciated.

enter image description here

Upvotes: 1

Views: 446

Answers (1)

Mohamed Dahshan
Mohamed Dahshan

Reputation: 51

You may use ion-radio instead.

<ion-list>
  <ion-radio-group>
    <ion-item *ngFor="let itm of shippingdetails">
      <ion-label>{{itm.name}}</ion-label>
      <ion-radio value="{{itm.id}}"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Upvotes: 1

Related Questions