Clicking A Disabled Input Or Button

Answer :

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.

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

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