Radio Buttons enabling and disabling check boxes

ASP Free Forums Sponsor:

April 16th, 2004, 01:10 PM

Beelzibub

Contributing User

Join Date: Oct 2003

Posts: 42

Time spent in forums: 14 m 25 sec
Reputation Power: 6

Radio Buttons enabling and disabling check boxes

Hi,

I am trying to have a set of radio buttons and a corresponding list of check boxes which would be enabled or disabled depending on what radio buttons are chosen. I created a code which would enable a group of checkboxes when a particular radio button is chosen. But within the checkboxes I am unable to code so that only one checkbox withing the group of checkboxes alone could be chosen. I would appreciate any help on it. Here is my code:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function validate_checkbox(val) {
frm=document.forms[0]
if(val=="checkbox 1")
{
alert('correct')
}
if(val=="checkbox 2")
{
alert('correct')
}
if(val=="checkbox 3")
{
alert('correct')
}
}

function Disab (val) {
frm=document.forms[0]

if(val=="option 1")
{
frm.checkbox1.disabled=false
frm.checkbox2.disabled=false;
frm.checkbox3.disabled=false;
frm.checkbox4.disabled=true;
frm.checkbox5.disabled=true;
frm.checkbox6.disabled=true;
frm.checkbox7.disabled=true;
frm.checkbox8.disabled=true;
frm.checkbox9.disabled=true;
}

if(val=="option 2")
{
frm.checkbox1.disabled=true;
frm.checkbox2.disabled=true;
frm.checkbox3.disabled=true;
frm.checkbox4.disabled=false;
frm.checkbox5.disabled=false;
frm.checkbox6.disabled=false;
frm.checkbox7.disabled=true;
frm.checkbox8.disabled=true;
frm.checkbox9.disabled=true;
}
if(val=="option 3")
{
frm.checkbox1.disabled=true;
frm.checkbox2.disabled=true;
frm.checkbox3.disabled=true;
frm.checkbox4.disabled=true;
frm.checkbox5.disabled=true;
frm.checkbox6.disabled=true;
frm.checkbox7.disabled=false;
frm.checkbox8.disabled=false;
frm.checkbox9.disabled=false;
}

}

</SCRIPT>

</HEAD>
<BODY TEXT="000000" BGCOLOR="FFFFFF">

<FORM>

<INPUT TYPE=radio NAME="f1" VALUE="option 1" onClick="Disab(this.value)">option 1
<INPUT TYPE=radio NAME="f1" VALUE="option 2" onClick="Disab(this.value)">option 2
<INPUT TYPE=radio NAME="f1" VALUE="option 3" onClick="Disab(this.value)">option 3
<P>
<input type="checkbox" name="checkbox1" value="checkbox 1" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox2" value="checkbox 2" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox3" value="checkbox 3" onClick="validate_checkbox(this.value)">
<P>
<input type="checkbox" name="checkbox4" value="checkbox 4" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox5" value="checkbox 5" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox6" value="checkbox 6" onClick="validate_checkbox(this.value)">
<P>
<input type="checkbox" name="checkbox7" value="checkbox 7" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox8" value="checkbox 8" onClick="validate_checkbox(this.value)">
<input type="checkbox" name="checkbox9" value="checkbox 9" onClick="validate_checkbox(this.value)">
<P> 
<P> 
<P> 
<P> 
<P> 
<P> 
</FORM>
</BODY>
</HTML>

May 4th, 2004, 07:11 AM

bhupi_dhami

Registered User

Join Date: May 2004

Posts: 6

Time spent in forums: < 1 sec
Reputation Power: 0

try this

I have included the modified function. U can easily extend it. Also note that these functions can be written more efficiently, instead of duplicating so much code.

function validate_checkbox(val)
{
frm = document.forms[0];
if(val=="checkbox 1")
{
if (frm.checkbox2.checked || frm.checkbox3.checked)
frm.checkbox1.checked = false;
}
if(val=="checkbox 2")
{
if (frm.checkbox1.checked || frm.checkbox3.checked)
frm.checkbox2.checked = false;
}
if(val=="checkbox 3")
{
if (frm.checkbox1.checked || frm.checkbox2.checked)
frm.checkbox3.checked = false;
}
}

May 4th, 2004, 07:12 AM

bhupi_dhami

Registered User

Join Date: May 2004

Posts: 6

Time spent in forums: < 1 sec
Reputation Power: 0

try this

I have included the modified function. U can easily extend it. The modified method allows u to select only one of the checkboxes in the first group. Also note that these functions can be written more efficiently, instead of duplicating so much code.

function validate_checkbox(val)
{
frm = document.forms[0];
if(val=="checkbox 1")
{
if (frm.checkbox2.checked || frm.checkbox3.checked)
frm.checkbox1.checked = false;
}
if(val=="checkbox 2")
{
if (frm.checkbox1.checked || frm.checkbox3.checked)
frm.checkbox2.checked = false;
}
if(val=="checkbox 3")
{
if (frm.checkbox1.checked || frm.checkbox2.checked)
frm.checkbox3.checked = false;
}
}

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: