Check if all checkboxes are checked

Question

If I have a dynamic checkbox filled like below, how can I check if all checkboxes are checked, so that I can disable / enable button depending if all checked or not.

Im using Angular 2+

<ion-item *ngFor="let field of filters">
  <ion-checkbox [(ngModel)]="filters[field]"></ion-checkbox>
</ion-item>

AJT82 AJT82 · Accepted Answer · 2017-10-21T09:02:26

What you could do, is to introduce a boolean value to your filters array and then assign that to your two-way-binding and upon change check if all checkboxes are checked and toggle another boolean flag for the button:

Your array:

filters = [{value:'val1',isChecked:false}, {value:'val2', isChecked:false}]

template:

<ion-item *ngFor="let field of filters">
  <ion-checkbox (click)="check()" [(ngModel)]="field.isChecked">
    {{field.value}}
  </ion-checkbox>
</ion-item>
<button ion-button [disabled]="!allChecked">Button</button>

and then the click event:

check() {
  this.allChecked = this.filters.every(x => x.isChecked === true)
}

DEMO: https://plnkr.co/edit/sVwz5OjL559x7eUlGK0c?p=preview

Check if all checkboxes are checked

1 Answers