CODEWITHSUNDEEP
javascriptionic-frameworkionic3
shah
shah

Reputation: 1169

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

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>

Upvotes: 8

Views: 4500

Answers (2)

Mebin Xtapps
Mebin Xtapps

Reputation: 51

Use [disabled] property in on-change function You can perform disable action and other functionality using the selected value

Upvotes: 1

Prithivi Raj
Prithivi Raj

Reputation: 2736

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>

Upvotes: 2

Related Questions