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.

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, Apr 23 '13 at 16:34
+1 for good-formulated question with fiddle and initial research! — Alex Shesterov, Apr 23 '13 at 16:34
Also note that this code disables context menus on every item on the page. — Ben McCormick, Apr 23 '13 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, Apr 23 '13 at 16:39
http://jsfiddle.net/e72M6/6/ it works with input type input :P i was really hoping there would be a trick to tell chrome that its ok to right click on disabled stuff even if its css or something wierd — Crushinator, Apr 23 '13 at 16:40
See also this question: http://stackoverflow.com/q/3100319/2170192 — Alex Shesterov, Apr 23 '13 at 16:41

score 4 · Answer 1 · answered Apr 23 '13 at 16:36

4

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.

answered Apr 23 '13 at 16:36

MMM

7,221
2
24
42

1

When you say "According to spec" what spec are you referring to? – Crushinator Apr 23 '13 at 16:43
[This](http://www.w3.org/TR/REC-html40/interact/forms.html#adef-disabled): `disabled` _When set for a form control, this boolean attribute disables the control for user input_ – MMM Apr 23 '13 at 16:47

score 3 · Accepted Answer · answered Apr 23 '13 at 16:50

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.

score 2 · Answer 3 · answered Apr 23 '13 at 16:30

2

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.

answered Apr 23 '13 at 16:30

Jon Newmuis

25,722
2
45
57

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

3 Answers3

Linked