ons-toolbar-button 以编程方式启用禁用

Question

我有

<ons-toolbar-button id="buttonNext" disabled >Next</ons-toolbar-button>

并且我想以编程方式启用它或再次禁用它。

我发现ons-button中有setDisabled(true)之类的方法，ons-toolbar-button中没有。

有人可以阐明如何以编程方式 enable/disable ons-toolbar-button 吗？谢谢。

Answer 1

工具栏按钮通常被删除或隐藏而不是禁用，这就是为什么 ons-toolbar-button 没有方法的原因。 setDisabled 只是向元素添加 disabled 属性，没有别的。您可以像这样为 ons-toolbar-button 实现它：

setDisabled = function(boolean) {
  if (boolean) {
    document.querySelector('ons-toolbar-button').setAttribute('disabled', '');
  } else {
    document.querySelector('ons-toolbar-button').removeAttribute('disabled');
  }
}

那么你当然需要一些 CSS:

ons-toolbar-button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

在这里查看：http://codepen.io/frankdiox/pen/PZZwMv

ons-toolbar-button 以编程方式启用禁用

ons-toolbar-button programmatically enable disable

onsen-ui