faqts : Computers : Programming : Languages : JavaScript : Forms : Radio buttons

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

224 of 279 people (80%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How do I disable a radio button?

Apr 15th, 2000 09:00
Martin Honnen, Scott Weaver, http://www.faqts.com/knowledge-base/view.phtml/aid/868/fid/130/lang/


With IE4+ and NN6 you can set the disabled property to false. You can 
do that for all buttons in a group but also for a single button in a 
group:
  document.formName.radioGroupName[index].disabled = true;
NN4 doesn't support this property so js code to ensure the state of the 
radio group is preserved is needed.
The code below is greatly a rewrite of an answer by Scott Weaver. I 
improved his code to work with single radio buttons (which are rare but 
sometimes exist) and removed a bug that occured when the disabling 
function was called repeatedly without enabling the button.
What the code does is storing the checked state of the radio buttons 
and then onclick ensuring that this state doesn't change. (Note that in 
my view that should all be possible by just cancelling the onclick but 
NN4 has a bug preventing that to work reliably)
<HTML>
<HEAD>
<STYLE>
.js {
  color: white;
  background-color: orange;
}
</STYLE>
<SCRIPT>
function preserveRadioGroup (evt) {
  this.checked = this.storedChecked;
  var rgb = this.form[this.name];
  if (!rgb.length && rgb.storedChecked)
    rgb.checked = true;
  else 
    for (var b = 0; b < rgb.length; b++)
      rgb[b].checked = rgb[b].storedChecked ? true : false;
}
function disableRadioGroup (radioGroup) {
  if (!radioGroup.disabled) {
    radioGroup.disabled = true;
    if (document.all || document.getElementById) {
      if (!radioGroup.length)
        radioGroup.disabled = true;
      else
        for (var b = 0; b < radioGroup.length; b++)
          radioGroup[b].disabled = true;
     }
    else {
      if (!radioGroup.length) {
        radioGroup.storedChecked = radioGroup.checked;
        radioGroup.oldOnClick = radioGroup.onclick;
        radioGroup.onclick = preserveRadioGroup;
      }
      else
        for (var b = 0; b < radioGroup.length; b++) {
          radioGroup[b].storedChecked = radioGroup[b].checked;
          radioGroup[b].oldOnClick = radioGroup[b].onclick;
          radioGroup[b].onclick = preserveRadioGroup;
        }
    }
  }
}
function enableRadioGroup (radioGroup) {
  if (radioGroup.disabled) {
    radioGroup.disabled = false;
    if (document.all || document.getElementById) {
      if (!radioGroup.length)
        radioGroup.disabled = false;
      else
        for (var b = 0; b < radioGroup.length; b++)
          radioGroup[b].disabled = false;
     }
    else {
      if (!radioGroup.length) {
        radioGroup.onclick = radioGroup.oldOnClick;
      }
      else
        for (var b = 0; b < radioGroup.length; b++) {
          radioGroup[b].onclick = radioGroup[b].oldOnClick;
        }
    }
  }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: disableRadioGroup(document.formName.aRadioGroup); 
void 0">
disable group 1
</A>
|
<A HREF="javascript: enableRadioGroup(document.formName.aRadioGroup); 
void 0">
enable group 1
</A>
|
<A HREF="javascript: disableRadioGroup(document.formName.a2ndRadio); 
void 0">
disable group 2
</A>
|
<A HREF="javascript: enableRadioGroup(document.formName.a2ndRadio); 
void 0">
enable group 2
</A>
<FORM NAME="formName">
Group 1
<INPUT TYPE="radio" CLASS="js" NAME="aRadioGroup" VALUE="Kibology">
<INPUT TYPE="radio" CLASS="js" NAME="aRadioGroup" VALUE="Scriptology">
<BR>
Group 2
<INPUT TYPE="radio" CLASS="js" NAME="a2ndRadio" VALUE="Kibo">
<BR>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>