Ion-select - Can I disable/re-enable the OK button?


I am using the ion-select many places where the first time it is opened there is no selection yet. In this case I would like to disable the OK button, and then enable it as soon as the user selects an option.

Is there an easy way to do this ( I can’t see any option in the doco)

Thanks in advance!


Hi @peterjc

I have tried some work around for your requirement, Please try it and let us know it works fine or not.


  <ion-select [(ngModel)]="gender" (ngModelChange)="func(gender)">
    <ion-option value="f" >Female</ion-option>
    <ion-option value="m">Male</ion-option>

<button ion-button round outline [disabled]="disableBtn">Okay</button> 


export class ContactPage {
  gender: string;
  disableBtn: boolean;
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    if (this.gender == null){
      this.disableBtn =true;

    if (gend != null || gend != "")


Thanks for the reply, but I actually meant the ok button on the select popup window, not another button on the page (see image below)


How do you create this “popup” as you call it? If you had provided a code example, it would be easier for us to understand what you did and what you want to do.


Can see an example of creating the select here, that has the following markup…

		<ion-title>{{ appName }}</ion-title>

	<ion-content padding>
		   <ion-option>Option 1</ion-option>
		   <ion-option>Option 2</ion-option>
		   <ion-option>Option 3</ion-option>

It is just the stock ion-select.

The popup has no selections, so I want to disable the OK button.


@peterjc Did you figure out how to disable Ok button until something is selected?


No not yet. I have left it for the time being. Would still like to get it done though.