ons-toolbar-button programmatically enable disable

Question

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.

I also need this, I've created an issue on github for this github.com/OnsenUI/OnsenUI/issues/1121 — Hirbod

Fran Dios Fran Dios · Accepted Answer · 2015-12-15T02:49:43

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

ons-toolbar-button programmatically enable disable

1 Answers