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>
