Clicking on a disabled radio button

Question

I want to disable a radio button but to be able to get the on-click event when it is disabled. Then I enclose the radio button in a div:

<div id="div_radio" display="block"><input type="radio" id="radio"/></div>

and I do, for example:

$("#div_radio").click(function(){
  $(this).hide();
});

You can try it here: http://jsfiddle.net/stla/6CKwk/2/

It works but one has to click not exactly on the radio button, and that is my problem. I have found several related questions on SO, but as a newbie in html/javascript it is possible that I have misunderstood some solutions.

Just looking at the fiddle and not your markup, since there's a single input, why are you using a radio button for this and not a checkbox, or even a button? — StuperUser, Mar 05 '14 at 09:15
@MaxArt I don't know, but that doesn't change anything to remove it. — Stéphane Laurent, Mar 05 '14 at 09:19
@StuperUser This is just a simplified example of my real situation... — Stéphane Laurent, Mar 05 '14 at 09:19
you can find your answer from this post [event-on-a-disabled-input](http://stackoverflow.com/a/3100395/3129183) — Rakesh Kumar, Mar 05 '14 at 09:21
Try setting the selector to the label instead of the div for the `hide()` method. So `$(".radio")` . it's not perfect but the nature of labels results in a much more generous clickable area. — Anthony, Mar 05 '14 at 09:29

score 3 · Accepted Answer · answered Mar 05 '14 at 09:18

3

You could use pointer-events CSS property on modern browsers:

DEMO jsFiddle

$("#button").click(function(){
  $("#radio").prop('disabled',true).css('pointer-events','none');
});

answered Mar 05 '14 at 09:18

A. Wolff

74,033
9
94
155

Guess I didn't understand the question at all. I thought OP _only_ wanted the click event on the radio itself. – andyb Mar 05 '14 at 09:28
@andyb indeed, OP wants click on disabled radio button to still propagate to its parent DIV – A. Wolff Mar 05 '14 at 09:28
Yes @andyb and this is not directly possible when the radio is disabled. Compare my jsfiddle to the one of A. Wolff. – Stéphane Laurent Mar 05 '14 at 09:30
Yes thanks I understand the problem now. _I think_ this is the only way to do it. Even a `z-index`'d overlay won't work as the browser itself it stopping the mouse events on disabled controls. You can't even _right click_ on disabled elements in Chrome – andyb Mar 05 '14 at 09:35
@andyb for full browser support, the way would be to put an element in front of the radio button when disabled. This is another possibility. – A. Wolff Mar 05 '14 at 09:38
Could you provide an example of your real situation? – A. Wolff Mar 05 '14 at 09:42
@A.Wolff I'd like but is not easy... This is a shiny app actually. When the button is disabled then the click doesn't work at all (even when clicking not exactly on the button) – Stéphane Laurent Mar 05 '14 at 09:44
@A.Wolff It works with `(".radio")` instead of `("#div_radio")`, but I have other radio buttons then I need to do more work – Stéphane Laurent Mar 05 '14 at 10:13
@StéphaneLaurent not sure what you are talking about but IDs must be unique on document context. If a class selector works but not the id one for the same element, then obviously you have duplicated IDs – A. Wolff Mar 05 '14 at 10:17
@A.Wolff There's no duplicated id. It works by doing ` – Stéphane Laurent Mar 05 '14 at 10:22

Clicking on a disabled radio button

1 Answers1