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');
});

Fendley

I don't think the click event will be fired on a disabled control – Stern

all the events are removed for disabled controls – Zobkiw

then why you disabled it – Farrish

Answer 1

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.

Ibidem

Answer 2

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" />

Mcatee

Answer 3

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

Gillam

works for me in FF - easiest and most compatible answer – Gangway

That should be accepted answer, works on chrome too – Polyunsaturated

works with a div wrapped around the disabled button – Larrup

Answer 4

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.

Linguist

Answer 5

disabled elements will not allow the user to interact with them.

So: no, you can't put an onclick on a disabled button and expect it to fire.

Intinction

Answer 6

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

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

The above example works with JQuery for disabled buttons that need the event to be captured.

Carrefour

Why do you think this works? Is it due to the ID? Or because it's a button? Or the value? This doesn't work at least on a text input. – Crowson

To be honest Im not sure but I suspect it is the order JQuery associates the listener when loading the DOM or it most likely just disregards the disabled property when doing so. – Carrefour

Answer 7

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>

Raviv

Answer 8

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!");
})

Just

I like your answer, but unfortunately it doesnt work. I guess disabled blocks event propagation or something – Okra

Answer 9

You should used disabled="disabled" and not just disabled.

$('input:disabled').val('disabled');

Hern

you can't click on any element with disabled="disabled" - that's the point of disabling it. – Hern