Why can t radio buttons be readonly

Question

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

User · Answer

I m using a JS plugin that styles checkbox radio input elements and used the following jQuery to establish a  readonly state  where the underlying value is still posted but the input element appears inaccessible to the user  which is I believe the intended reason we would use a readonly input attribute     if    node  prop  readonly            node  parent  div   addClass  disabled       just styling  appears greyed out       node  on  click   function  e            e preventDefault

User · Answer

I found that use onclick  this checked   false   worked to a certain extent  A radio button that was clicked would not be selected  However  if there was a radio button that was already selected  e g   a default value   that radio button would become unselected    lt  -- didn t completely work -- gt   lt input type  radio  name  r1  id  r1  value  N  checked  checked  onclick  this checked   false   gt N lt  input gt   lt input type  radio  name  r1  id  r1  value  Y  onclick  this checked   false   gt Y lt  input gt    For this scenario  leaving the default value alone and disabling the other radio button s  preserves the already selected radio button and prevents it from being unselected    lt  -- preserves pre-selected value -- gt   lt input type  radio  name  r1  id  r1  value  N  checked  checked  gt N lt  input gt   lt input type  radio  name  r1  id  r1  value  Y  disabled gt Y lt  input gt    This solution is not the most elegant way of preventing the default value from being changed  but it will work whether or not javascript is enabled

User · Answer

I ve come up with a javascript-heavy way to achieve a readonly state for check boxes and radio buttons  It is tested against current versions of Firefox  Opera  Safari  Google Chrome  as well as current and previous versions of IE  down to IE7     Why not simply use the disabled property you ask  When printing the page  disabled input elements come out in a gray color  The customer for which this was implemented wanted all elements to come out the same color   I m not sure if I m allowed to post the source code here  as I developed this while working for a company  but I can surely share the concepts   With onmousedown events  you can read the selection state before the click action changes it  So you store this information and then restore these states with an onclick event    lt input id  r1  type  radio  name  group1  value  r1  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    checked  checked  gt Option 1 lt  input gt   lt input id  r2  type  radio  name  group1  value  r2  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    gt Option 2 lt  input gt   lt input id  r3  type  radio  name  group1  value  r3  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    gt Option 3 lt  input gt    lt input id  c1  type  checkbox  name  group2  value  c1  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    checked  checked  gt Option 1 lt  input gt   lt input id  c2  type  checkbox  name  group2  value  c2  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    gt Option 2 lt  input gt   lt input id  c3  type  checkbox  name  group2  value  c3  onmousedown  storeSelectedRadiosForThisGroup this name    onclick  setSelectedStateForEachElementOfThisGroup this name    checked  checked  gt Option 3 lt  input gt    The javascript portion of this would then work like this  again only the concepts    var selectionStore   new Object        keep the currently selected items  ids in a store  function storeSelectedRadiosForThisGroup elementName           get all the elements for this group     var radioOrSelectGroup   document getElementsByName elementName           iterate over the group to find the selected values and store the selected ids in the selectionStore          radioOrSelectGroup i  checked    true  tells you that         remember checkbox groups can have multiple checked items  so you you might need an array for the ids            function setSelectedStateForEachElementOfThisGroup elementName           iterate over the group and set the elements checked property to true false  depending on whether their id is in the selectionStore                 make sure you return false here     return false      You can now enable disable the radio buttons checkboxes by changing the onclick and onmousedown properties of the input elements

User · Answer

I have a lengthy form  250  fields  that posts to a db   It is an online employment application   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     works like a charm for  disabling  radios and checkboxes ipso facto

User · Answer

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    lt input type  radio  name  foo  value  Y  checked gt   lt input type  radio  name  foo  value  N  disabled gt    Fiddle  http   jsfiddle net qqVGu

User · Answer

A fairly simple option would be to create a javascript function called on the form s  onsubmit  event to enable the radiobutton back so that it s value is posted with the rest of the form   It does not seem to be an omission on HTML specs  but a design choice  a logical one  IMHO   a radiobutton can t be readonly as a button can t be  if you don t want to use it  then disable it

User · Answer

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

User · Answer

Try the attribute disabled  but I think the you won t get the value of the radio buttons  Or set images instead like    lt img src  itischecked gif  alt   x     gt radio button option   Best Regards

User · Answer

What about capturing an  On click    event in JS and checking it like here    http   www dynamicdrive com forums showthread php t 33043

User · Answer

The best solution is to set the checked or unchecked state  either from client or server  and to not let the user change it after wards  i e make it readonly  do the following    lt input type  radio  name  name  onclick  javascript  return false     gt

User · Answer

This is the trick you can go with    lt input type  radio  name  name  onclick  this checked   false     gt

User · Answer

For the non-selected radio buttons  flag them as disabled  This prevents them from responding to user input and clearing out the checked radio button  For example    lt input type  radio  name  var  checked  yes  value  Yes  gt  lt  input gt   lt input type  radio  name  var  disabled  yes  value  No  gt  lt  input gt

User · Answer

JavaScript way - this worked for me    lt script gt    document  ready function            YourTableId   find      each function        this  attr  disabled   true            lt  script gt    Reason        YourTableId   find      -  this returns all the tags      YourTableId   find      each function        this  attr  disabled   true       iterates over all objects captured in this and disable input tags    Analysis  Debugging     form radiobutton is internally considered as an  input  tag  Like in the above function    if you try printing document write this tagName   Wherever  in tags it finds radio buttons  it returns an input tag    So  above code line can be more optimized for radio button tags  by replacing   with input      YourTableId   find  input   each function        this  attr  disabled   true

[html] Why can't radio buttons be "readonly"?

Examples related to html

Examples related to radio-button

Examples related to readonly