Search code examples
onsen-ui

ons-toolbar-button programmatically enable disable

I have

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

and I want to programmatically enable it or disable it again.

I found that in ons-button, there is methods like setDisabled(true) but not for ons-toolbar-button.

Could someone shed some light on how to programmatically enable/disable ons-toolbar-button? thanks.

Solution

  • Toolbar buttons are usually removed or hidden rather than disabled, that's why there are no methods for ons-toolbar-button. setDisabled just adds disabled attribute to the element, nothing else. You can implement it for ons-toolbar-button like this:

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

    Then of course you need some CSS:

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

    Check it out here: http://codepen.io/frankdiox/pen/PZZwMv