Button disabled not functioning as expected

[munsterlander]

Ok, I think I am losing my marbles on this one (Onsen 2.0):

<ons-button id="myButton" onclick="document.getElementById('myButton').disabled=true;">Click Me</ons-button>

http://codepen.io/anon/pen/WwQJOR

So this doesn’t work. The documented methods setDisabled, are only for Angular1. As many of you know, I only work in vanilla JS, so is there a way to set an Onsen button disabled? When I log the same value, it shows true, but I think it is reading it as a variable in a structure and not the actual method which is bound to functionality. Does this make sense or am I missing something super basic here?

[Fran Diox]

@munsterlander What’s more Vanilla than myElement.setAttribute('disabled', '')? :)

The old setDisabled was just setting disabled attribute as well. Docs here.

This is the actual disabled “code”:

.button[disabled]
  opacity 0.3
  cursor default
  pointer-events none

[argelius]

@Fran-Diox I guess we can add a disabled setter to the elements that can be disabled. :)

[munsterlander]

@Fran-Diox Arggggg. I think this is twice you have pointed out setAttribute to me! I always forget this method for some reason. Such a waste of everyone’s time!! My fault. :scream: :grinning:

Horrible, horrible edit (insert my walk of shame here): So, yeah, @Fran-Diox did answer this EXACT question for ME on SO. Oh, I am so embarrassed right now.

http://stackoverflow.com/questions/35112288/pure-js-disable-button-in-onsen-2-0-monaca

[munsterlander]

@argelius Please add this just to spare @Fran-Diox from having to answer this anymore for me. :stuck_out_tongue_closed_eyes:

[Fran Diox]

@munsterlander Hahah, I didn’t even remember. Don’t worry, we needed a reference to that question in the forum as well :sweat_smile:

@argelius I guess we can add it if it’s easier for users :)

[munsterlander]

@Fran-Diox What’s sad is, I think everyone else gets it. It’s just poor me over here who seems to forget this method. :smile:

Honestly though, I would much rather you guys spend your time on other things because the current behavior is correct to javascript. Adding a disabled method, when in reality we are setting a css class as an attribute, goes against (in my opinion) what we are actually coding.

I should just be more mindful of what we are doing and at a minimum the docs could be updated to show that modifier and disabled are CSS classes / attributes. I just spent so much time with other platforms docs that I confuse myself with the verbiage. Totally my fault and not the platform (or the docs to be honest).

[argelius]

I think we can add a disabled method since the native elements have one. All it does it set the attribute though.