Ionic: Make checkbox checked in event handler if specific criteria are met

Issue

I have a form with checkboxes and for certain checkboxes the following applies:

When a checkbox is checked and gets clicked and some statement is true, then the checkbox should not get unchecked, but jump back to checked state.

This is the current html:

<ion-item>
    <ion-label stacked  [innerHTML]="htmlString"></ion-label>
    <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
  </ion-item>

And this is the current .ts:

checkboxClick(e){
    var statement = true;

    if(statement){
    e.target.checked = true;
    }
  }

Here is a stackblitz showcasing the issue: https://stackblitz.com/edit/ionic-tcxd55?file=pages%2Fhome%2Fhome.ts

Solution

Use (ionChange) instead of (click)

html

<ion-checkbox (ionChange)="checkboxClick($event)" checked></ion-checkbox>

ts

  checkboxClick(e){
    var statement = true;
    if(statement){
      e.checked = true;
    }
  }

Answered By - Sabyasachi Patra