Ionic 3 - ion-select(multiple) disable all options after selecting two items

user_4153833 0
Viewed 3913

I want to disable all options once two options checked. I have tried (ionChange) but this event fired after clicking the "Ok" button of the select model. Is there any other event which execute before "ionChange"?

disable

 <ion-item>
     <ion-label>Values</ion-label>
     <ion-select formControlName="Values" multiple="true">
          <ion-option value="1">1 value</ion-option>
          <ion-option value="2">2 value</ion-option>
          <ion-option value="3">3 value</ion-option>
          <ion-option value="4">4 value</ion-option>
         <ion-option value="5">5 value</ion-option>
    </ion-select>
 </ion-item>
ionic3 ionic-framework javascript
2 Answers

Below code will satisfy your requirement. Change the check box limit to increase or decrease the number of options that can be selection. Tips to optimization is also welcomed.

Working demo

component file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  selectedIng : Array<any>=[];
  numberOfChecks : number=1;
  checkBoxLimit : any =1;
  constructor(public navCtrl: NavController) {
    this.pizzaIng=[
      {name : "Pepperoni", checked : false},
      {name : "Sasuage", checked : true},
      {name : "Mushrooms", checked : false}
    ];
    this.selectedIng=[{name : "Sasuage", checked : true}];    
  }

  updateIng(ing){
      if(ing.checked === true){
      this.selectedIng.push(ing);
      this.numberOfChecks++;
      }else{
        this.selectedIng=this.pizzaIng.filter((ingr)=>{
          console.log(ingr['checked'])
          return ingr['checked']===true;
        })
        this.numberOfChecks--;
      }

    console.log(this.selectedIng);
    console.log(this.numberOfChecks);
  }
}

HTML file

  <ion-list>
  <ion-item  *ngFor="let ing of pizzaIng; let i = index">
    <ion-label>{{ing.name}}</ion-label>
    <ion-checkbox [(ngModel)]="ing.checked"  [disabled]="ing.checked==false && numberOfChecks>=checkBoxLimit"  (ionChange)="updateIng(ing)"></ion-checkbox>
  </ion-item>
</ion-list>
user_57823470
Related