Menu
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"?
<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>
808
By adding the multiple="true" attribute to ion-select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The ion-select multiple="true" component's value receives an array of all the selected option values.
If you have used a select component with Ionic before you might have noticed a general lack of options and functions that you need. Lucky us there’s a component that offers most of what we need right out of the box and is super easy to integrate!
The ion-select component is similar to an HTML <select> element, however, Ionic's select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a dialog will appear with all of the options in a large, easy to select list for users.
The ion-select multiple="true" component's value receives an array of all the selected option values. In the example below, because each option is not given a value, then it'll use its text as the value instead.
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>
Use [disabled] property in on-change function You can perform disable action and other functionality using the selected value
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
