Cancel an ionChange event?

Ionic Framework ionic-v3
5

“Simpler” is in the eye of the beholder, but this works:

export class HomePage {
  fruits = ['apple', 'banana', 'cherry'];
  basket = [false, false, false];
  selcount = 0;
  maxcount = 2;

  onFruitSelectionChange(fix: number, cbox: Checkbox): void {
    if (cbox.checked != this.basket[fix]) {
      if (cbox.checked) {
        if (this.selcount >= this.maxcount) {
          alert("basket is full");
          cbox.checked = false;
          return;
        }
        this.basket[fix] = true;
        ++this.selcount;
      } else {
        this.basket[fix] = false;
        --this.selcount;
      }
    }
  }
}

<ion-list>
  <ion-item *ngFor="let fruit of fruits; let fix = index">
    <ion-label>{{fruit}}</ion-label>
    <ion-checkbox [checked]="basket[fix]" (ionChange)="onFruitSelectionChange(fix, $event)"></ion-checkbox>
  </ion-item>
</ion-list>
2 Likes