Button disabled not functioning as expected
-
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?
-
@munsterlander What’s more Vanilla than
myElement.setAttribute('disabled', '')
? :)The old
setDisabled
was just settingdisabled
attribute as well. Docs here.This is the actual
disabled
“code”:.button[disabled] opacity 0.3 cursor default pointer-events none
-
@Fran-Diox I guess we can add a
disabled
setter to the elements that can be disabled. :)
-
@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
-
@argelius Please add this just to spare @Fran-Diox from having to answer this anymore for me. :stuck_out_tongue_closed_eyes:
-
@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 :)
-
@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).
-
I think we can add a
disabled
method since the native elements have one. All it does it set the attribute though.