fire alert on disabled button not working on firefox

Question

I'm trying to get an alert when you click on a disabled button and the following code works fine in Chrome, but it isn't firing the alert in Firefox.

Javascript:

$(document).on('click',function(e){
    if(e.target.id == "disabled" && e.target.disabled){
        alert("The textbox is clicked.");
    }
});

HTML:

<form>
    <input id="disabled" type="button" value="clk" disabled>
</form>

Answer 1

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

source: Disabled button stealing onclick events in firefox

I create this fiddle fiddle according @VDesign post refer to an older question.

HTML:

<div style="display:inline-block; position:relative;">
    <input id="disabled" type="button" value="clk" disabled>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

JS:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();  
});

Answer 2

Try this : It is working in firefox version 28.0, here is the screenshot

<form>
<input id="disabled" type="button" value="clk" disabled>
</form>

jQuery :

$(document).on('click',function(e){

  var isDisabled = $('#disabled').prop('disabled');

    if (isDisabled)
    {
            alert('yes');
    }
    else
    {
        alert('no');
    }    

});

FIDDLE

Also you cannot have a mouse event such as click on disable element. Alternative you can do like this : FIDDLE DEMO

Answer 3

@AlexChar's answer perfectly captures the underlying problem: Firefox swallows click events (and maybe others) on disabled input elements. I'm adding this answer because I think there's a slightly less hacky way to address this issue in 2020. If you turn off pointer-events for disabled input elements (input:disabled) then the event will bubble up to parent div. This can be done only for Firefox via the @-moz-document url-prefix() rule.

@-moz-document url-prefix() {
  input:disabled {
    pointer-events: none;
  }
}

<div onclick="alert('working!')">
  <input disabled>
</div>

Note that this does come with the downside of not being able to highlight and copy the text in the disabled input, but there are other ways around that.

Answer 4

Possible solution for this issue:

Review Event on a disabled input

Placing a div around your disabled button and append an onclick event on the div will do the trick.