Question

我创建了一个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函数的参数'condition'），我必须禁用showCheckbox()按钮。

Answer 1

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

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

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"左右。

所以你需要编写一个函数，每次点击你的输入时都会触发（通过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');

希望我能提供帮助。

干杯 Unkn0wn0x

如何将禁用按钮添加到离子2警报

1 个答案: