It would be a lot of work, but technically when you disable the element, you could stack a transparent element on top of it (so the user can't see it), same size/shape, and listen for that click event. When it's enabled, hide that stacked element.
Here's something to get you started: http://jsfiddle.net/8dYXd/2/
It uses this structure:
<span>
<input id='a' type='checkbox' disabled="disabled" />
<span class="disabled-detector"></span>
</span>
And this CSS:
span {
position: relative;
}
span.disabled-detector {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
input+span.disabled-detector {
display: none;
}
input[disabled]+span.disabled-detector {
display: inline;
}
Notice how you can still "click" on disabled elements.
You'll have to update it to make sure the click
(or contextmenu
) event targets both the input
and the transparent element. Technically, you could just use the parent <span>
- give it a special class, and listen for click
events on that. The events will bubble up from its descendants, so that should be fine.