Problem
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 strange method I need to use to make read-only work properly? Should I just write it in JavaScript?
In the meantime, does anyone know why read-only does not work in radio buttons but does in other input tags? Is this one of those perplexing omissions from the HTML specifications?
Asked by mcv
Solution #1
If there are additional possibilities, radio buttons would just need to be read-only. A ticked radio button cannot be unchecked if you don’t have any other selections. If you have other alternatives, you may simply disable them to prevent the user from changing the value:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
Fiddle: http://jsfiddle.net/qqVGu/
Answered by Sampson
Solution #2
I’ve simulated readonly on a radio button by disabling only the radio buttons that aren’t checked. It prevents the user from choosing an alternative value, and the checked value is always saved when the form is submitted.
Making readonly using jQuery:
$(':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.
Answered by Megan
Solution #3
This is the method you can use.
<input type="radio" name="name" onclick="this.checked = false;" />
Answered by Sarfraz
Solution #4
I’ve got a long form (250+ fields) that goes into a database. It’s a job application that may be completed online. When an admin goes to look at an application that has been filed, the form is populated with data from the db. Input texts and textareas are replaced with the text they submitted but the radios and checkboxes are useful to keep as form elements. Disabling them makes them harder to read. Setting the .checked property to false onclick won’t work because they may have been checked by the user filling out the app. Anyhow…
onclick="return false;"
It works perfectly for ipso facto ‘disabling’ radios and checkboxes.
Answered by humbolight
Solution #5
The best approach is to set the checked or unchecked status (either from the client or the server) and not allow the user to change it afterwards (i.e. make it readonly).
<input type="radio" name="name" onclick="javascript: return false;" />
Answered by Vipresh
Post is based on https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly