Why can't radio buttons be "readonly"?
I would like to show a radio button, have its value submitted, but depending on the circumstances, have it not editable. Disabled doesn't work, because it doesn't submit the value (or does it?), and it grays out the radio button. Read-only is really what I'm looking for, but for some mysterious reason it doesn't work.
Is there some weird trick I need to pull to get read-only to work as expected? Should I just do it in JavaScript instead?
Incidentally, does anyone know why read-only doesn't work in radio buttons, while it does work in other input tags? Is this one of those incomprehensible omissions in the HTML specs?
Radio buttons would only need to be read-only if there are other options. If you don't have any other options, a checked radio button cannot be unchecked. If you have other options, you can prevent the user from changing the value merely by disabling the other options:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
Fiddle: http://jsfiddle.net/qqVGu/
I've faked readonly on a radio button by disabling only the un-checked radio buttons. It keeps the user from selecting a different value, and the checked value will always post on submit.
Using jQuery to make readonly:
$(':radio:not(:checked)').attr('disabled', true);
This approach also worked for making a select list readonly, except that you'll need to disable each un-selected option.