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?


  • Onsen UI

    @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
    


  • @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:


  • Onsen UI

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


Log in to reply