15

It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:

<div>
   <input type="button" onclick="save()" id="saveButton"    value="save"  disabled="disabled" />
   <input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>

function save(){
    var count = parseInt($('#counter').html());
    $('#counter').html(++count);
}
function byPassDisabled(){
     $('#saveButton').click();   
}

see http://jsfiddle.net/WzEvs/363/

In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.

  • But why? This behavior doesn't seem fair to me.
  • Any workaround?
5
  • thanks for the valuable input. I just believe this is not an expected behavior, that's all. Alternatively, I may use $('#saveButton:enabled').click(); instead.
    – domi
    Jan 29, 2015 at 11:08
  • First, do not use inline handlers. Your buttons have ids. Use jquery to bind event handlers $('#id').click(blah). Second, do not simulate events to trigger another functionality. function tryToSave() {if(currentStateAllowYouToSave) save();}. Jan 29, 2015 at 11:13
  • 1. I'm using angular ng-click to bind the save function, I cannot use id to bind it. 2. Keyboards shortcuts are ment to trigger buttons. 3. I do not want to have to check the button state, it's an hassle
    – domi
    Jan 29, 2015 at 11:40
  • well, there are no angular library to handle keyboard shortcuts, are there?
    – domi
    Jan 29, 2015 at 11:55

4 Answers 4

28

The attribute only disables user interaction, the button is still usable programmatically.

So yeah, you gotta check

function byPassDisabled(){
    $('#saveButton:enabled').click();   
}

Alternatively don't use inline handlers.

$(document).on('click', '#saveButton:enabled', function(){
    // ...
});
4
  • 8
    :not(:disabled) can be shortened to :enabled
    – Rence
    Jan 29, 2015 at 11:10
  • Yeah, thanks. Was too focused on the disabled check :D
    – Spokey
    Jan 29, 2015 at 11:12
  • Actually, I use angular ng-click.
    – domi
    Jan 29, 2015 at 11:21
  • 3
    "clicking" is not user interaction?
    – ShadowKras
    Apr 13, 2017 at 14:07
5

For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.

const element = document.getElementById('saveButton');
element.click() //this would not work
2
  • 1
    This is correct, thanks for posting this. I ran into a similar issue while using React and was confused by the number of jQuery-related posts which stated that my disabled button is still active when .click() is used, despite the fact that I was doing just that in my code and a disabled button was not firing. Aug 7, 2018 at 21:07
  • I noticed element.dispatchEvent(new Event("click")) would still work
    – Paul
    Feb 22 at 21:06
2

You can programmatically trigger click on a disabled button.

There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/

$(function () {
    $("#saveButton").on('click', function (e) {
        if (!e.isTrigger) {
            var count = parseInt($('#counter').html());
            $('#counter').html(++count);
        }
    });
    $("#bypassButton").on('click', function (e) {
        $("#saveButton").click();
    });
});

e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.

2
  • Spokey's solution is way simpler.
    – domi
    Jan 29, 2015 at 11:28
  • 2
    I agree, but this might fit at requirements where we want to identify if it is a user click or triggered one :)
    – Vijay
    Jan 29, 2015 at 11:31
0

You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) . off or unbind the click will solve this issue.

Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.