Ion-checkbox limit checked options

Ionic Framework ionic-v3
1

Hi!
I wanna limit the ion-checkbox selection to 5, without disabling all the others when it reaches 5.
Is it possible? I’ve been looking for solutions but since last year no one talked about it, and the existing posts remain without solutions(probably they’ve found it but didnt post)

Thanks for your help!

page.html

  <ion-list>
    <ion-item *ngFor="let entry of form">
        <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
        <ion-label>{{entry.val}}</ion-label>
    </ion-item>
  </ion-list>
2

Found it lmao
Leaving the answer here for future beginners!

html

  <ion-list>
    <ion-item *ngFor="let entry of form">
        <ion-checkbox slot="end" [(ngModel)]="entry.isChecked" (click)="check(entry)" [disabled]="!entry.isChecked && checkeds === limit"></ion-checkbox>
        <ion-label>{{entry.val}}</ion-label>
    </ion-item>
  </ion-list>

ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  public form = [
    { val: 'Queijo', isChecked: false },
    { val: 'Presunto', isChecked: false },
    { val: 'Espinafre', isChecked: false },
    { val: 'Leite', isChecked: false },
    { val: 'Ovos', isChecked: false },
    { val: 'Frango', isChecked: false },
    { val: 'Tomate', isChecked: false },
    { val: 'Queijo', isChecked: false },
    { val: 'Presunto', isChecked: false },
    { val: 'Espinafre', isChecked: false },
    { val: 'Leite', isChecked: false },
    { val: 'Ovos', isChecked: false },
    { val: 'Frango', isChecked: false },
    { val: 'Tomate', isChecked: false },
    { val: 'Azeitona', isChecked: false }
  ];
 public checkeds = 0;
 public limit = 5;
 public podecheck = true;
  constructor() {}

  check(entry) {
    if (!entry.isChecked){
      this.checkeds++;
      console.log(this.checkeds);
    } else {
      this.checkeds--;
      console.log(this.checkeds);
    }
  }

}
2 Likes
3

Great. :slight_smile: You should add a profile pic so that we can actually see you. Many thanks.