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

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

• javascript
• jquery
• right-click

• 2 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/remove that stacked element – Ian Commented Apr 23, 2013 at 16:34
• 2 +1 for good-formulated question with fiddle and initial research! – Alex Shesterov Commented Apr 23, 2013 at 16:34
• @Ian I think you mean "transparent element"? – Ben McCormick Commented Apr 23, 2013 at 16:37
• Also note that this code disables context menus on every item on the page. – Ben McCormick Commented Apr 23, 2013 at 16:38
• You don't need to normalize e, jQuery does it for you. Just use e.target and it will be cross-browser consistent with getting the right element – Ian Commented Apr 23, 2013 at 16:39

3 Answers 3

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.

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

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.