Clicking a disabled input or button

Question

Is it possible to click on a disabled button and provide some feedback to the user?

HTML:

<input type="button" value="click" disabled>

and JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

The above code is not working for me; neither is this:

$('input').live('click', function () {
    alert('CLICKED');
});

Answer 1

Making the field readonly can help, because the click event will be fired. Though be aware of the differences in behaviour.

<input type="button" value="click" readonly="readonly" />

Answer 2

What about wraping the button in some element and catching click on this element instead?

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript:

$("#container").click(function(){
    alert("Element clicked!");
})

Answer 3

There is no way to capture a click on disabled elements. Your best bet is to react to a specific class on the element.

HTML Markup:

<input type="button" class="disabled" value="click" />

JavaScript code:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

You could then use CSS styling to simulate a disabled look:

.disabled
{
    background-color: #DDD;
    color: #999;
}

Here's a jsFiddle demonstrating its use.

Answer 4

you can't click on disabled button, but can click on disabled link

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>

Answer 5

Put

input[disabled] {pointer-events:none}

in your CSS (it prevents some browsers from discarding clicks on disabled inputs altogether), and capture the click on a parent element. It's a cleaner solution, IMHO, than putting a transparent overlay over the element to capture the click, and depending on circumstances may also be much easier than simply "simulating" the disabled state using CSS (since that won't prevent the input from being submitted, and also requires overriding the default browser 'disabled' style).

If you have multiple such buttons, you'll need a unique parent for each, in order to be able to distinguish which button was clicked, because with pointer-events:none, the click target is the button's parent rather than the button itself. (Or you could test the click coordinates, I suppose...).

If you need to support older browsers, though, do check which ones support pointer-events: http://caniuse.com/#search=pointer-events

Answer 6

You can't without a workaround, see: jQuery detect click on disabled submit button

The browsers disable events on disabled elements.

Edited to add context from link:

The asker found this thread with an explanation of why the events aren't registering: http://www.webdeveloper.com/forum/showthread.php?t=186057

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.

The workaround would be style the button to "look" disabled, while not actually being so.