How to add a disabled button to ionic 2 alert

Question

I created an ionic2 alert and I have to disable a button according to a condition.

This is a simple structure of my code:

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox(condition) {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',

      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

I have to disable Okay button if given condition is true (parameter 'condition' that passed to the showCheckbox() function).

Answer 1

I know the question was asked over a year ago, just in case someone other needs it.

I've created a little, I would say, "workaround", which works like a charm.

alert.present() offers a Promise, so we can listen to it, after the alert was successfully created.

Now, here's what I've done:

alert.present().then(() => {

    /** disable the confirm button initial */
    document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');
    return;
});

It's a bit hacky to access the confirm button via document.querySelector(); and the above query, but the confirm button does not has a unique identifier as I've seen it, something like role="confirm" or so.

So You need to write a function, which will be triggered on each click on Your inputs (via handler).

alert.addInput({
   type: 'checkbox',
   label: 'testLabel',
   value: 'testValue',
   handler: () => {
      functionToCheckConfirmButtonState();
   }
});

There You need to check Your checkbox values inside the functionToCheckConfirmButtonState(); function and enable the confirm button with:

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').removeAttribute('disabled');

or disable it again with:

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');

Hope I could help.

Cheers Unkn0wn0x