如何向 ionic 2 警报添加禁用按钮

我创建了一个 ionic2 警报，我必须根据条件禁用按钮。

这是我的代码的简单结构：

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();
  }
}

我必须禁用Okay按钮，如果给定条件是true（传递给的参数“条件”showCheckbox()功能）。

我知道这个问题是一年多前提出的，以防其他人需要它。

我创造了一些，我想说，“解决方法”，它就像一个魅力。

alert.present()提供Promise，这样我们就可以在警报创建成功后收听它。

现在，这就是我所做的：

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;
});

通过以下方式访问确认按钮有点麻烦document.querySelector();和上面的查询，但确认按钮没有我所看到的唯一标识符，例如role="confirm" or so.

所以你需要编写一个函数，每次点击你的输入时都会触发该函数（通过handler).

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

您需要检查您的复选框值functionToCheckConfirmButtonState();功能并启用确认按钮：

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

或者使用以下命令再次禁用它：

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

希望我能帮忙。

干杯 未知0wn0x