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.

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.

Fran Diox

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

@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.

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.

Button disabled not functioning as expected browsing