[SOLVED] Verify that ion-checkbox is checked in Ionic

Issue

I have a checkbox list, I need to identify when at least 1 of these items is checked to enable a button.

So far I’ve managed to do that, but it doesn’t work with event.target.checked, just nothing happens, I also just tried event.checked and nothing.

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="isChecked($event)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

file.ts:

isChecked(event) {
  if ( event.target.checked ) {
    console.log("Checked!");
    this.btnDisabled = false;
 }
}

Ionic version: 3.9.5

Angular 5

Solution

Try like this:

Working Demo

Template:

<ion-list>
   <ion-item *ngFor="let option of question.options">
      <ion-label>{{option}}</ion-label>
      <ion-checkbox color="secondary" value="option" (click)="onChange(option)" name="option"></ion-checkbox>
   </ion-item>
</ion-list>

<button [disabled]="checkedItems.length <1 ">Save </button>

TS:

 checkedItems = []


 onChange(item) {
    if(this.checkedItems.includes(item)) {
      this.checkedItems = this.checkedItems.filter((value)=>value!=item);

    } else {
      this.checkedItems.push(item)
    }
  }

Answered By – Adrita Sharma

Answer Checked By – David Goodson (BugsFixing Volunteer)