How to disable/enable a checkbox on right-click in chrome and firefox

Question

I wrote some code which allows me to disable/enable checkboxes when I right-click them. It works in IE but not in Chrome or Firefox.

rightClickFunc: function (e) 
{
    var obj;
    if ($.browser.msie) obj = event.srcElement;
    else obj = e.target;
    stuff.disableEnableObject(obj);
    return false;
},

disableEnableObject: function (o)
{
    if (o.getAttribute("disabled") == null)                
          $('#'+o.id).attr("disabled", "disabled");
    else  $('#'+o.id).removeAttr("disabled");
}

How can I get the same functionality in Chrome as IE? The problem seems to be that right clicking on a disabled item in chrome does open the context menu (right click menu).

I made a sample of the code - see http://jsfiddle.net/e72M6/. Run it in IE and chrome to see the difference. (IE can enable the boxes, Chrome cannot).

I want the other browser to have the same functionally as IE. So the boxes can be enabled.

Answer 1

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.

Answer 2

According to the spec disabled elements should not respond to click events.

What you want to do is overlay an invisible (opacity: 0) element on top of this and use it as a proxy for your events. Just bear in mind that some old browsers don't understand opacity.

Answer 3

It works to disable the element, but not to re-enable it. This is because disabled elements do not fire mouse events. I do not think that there is a way for you to get this to work in all browsers.