Hi,

 

I am currently making a form for a website where I need users to be able to check a checkbox and then have a group of radio buttons become available to them.

 

e.g. they select that they want a particular item (through a checkbox), then they select the quantity through a group of radio buttons & if the item is not selected I want the radio buttons to be greyed out.

 

so essentially I want a check box to activate a group of radio buttons when checked, and grey them out when unchecked.

 

I hope this is making sense as it's become really difficult to find anything on google because I don't know if there is a name for what I'm trying to do?

 

Does anybody A.) know what I'm attempting to explain and B.) know how this could be done?

 

Cheers

 

Rich

Hey,

 

I may have solution for your problem. The code is very ugly cause i made it in dreamweaver but it can hopefully get you going. Only problem with this example is that you cant hide that radials again. Should find the event name for the state of the checkbox to fix that.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) 
 with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body onload="MM_showHideLayers('radial','','hide')">
<form id="form1" name="form1" method="post" action="">
 <label>
 <input name="radial" type="checkbox" id="test" onselect="MM_showHideLayers('radial','','show')" />
 </label>
 <p> </p>
 <p>

 <div id="radial">
<input type="radio" name="radio" id="1" value="1" />
<br />

<input type="radio" name="radio" id="12" value="1" />
<br />
<input type="radio" name="radio" id="13" value="1" />
<br />
<input type="radio" name="radio" id="14" value="1" />
<br />
<input type="radio" name="radio" id="15" value="1" />
</div>

 </p>
</form>
</body>
</html>

 

Anywayz Good luck with it and now i hope i understood the question .

 

 

Greetz, R-J

Hi, thanks for your help, but I can't see for the life of me what that does? I have very little experience with JavaScript, could you possibly explain it a little?

 

I have done a little research into how to 'grey out' form elements and this can be done like this:

 

<input type="radio" name="fountain" disabled />

 

The 'disabled' part greys it out.

 

I think what I need is some JavaScript that goes a little like this:

 

if (checkbox1 == checked) {
   variable1 = "disabled"
}

else {
   variable1 = ""
}

 

then this would be the HTML

 

<input type="radio" name="fountain" <script type="text/javascript">print variable1</script> />

 

 

At least that is how I would do it in PHP, but of course it will need to be done 'live' so I need to use JavaScript, anybody got any thoughts?

If you just want them greyed out then its rather simple. I use this function which will toggle between disabled or enabled. You would have to start the page by disabling the control first if thats what you need

 

<script type="text/javascript">
function toggle(control) {
if(document.getElementById(control).disabled) {
	document.getElementById(control).disabled = false
}
else {
	document.getElementById(control).disabled = true
}
}
</script>

 

You could call it like this:

<input type="checkbox" name="myCheck" value="ON" onClick="toggle('myRadioButton')">

 

Edit: If you need the controls disabled as soon as the page loads then just call that function on the body like so:

<body onLoad="toggle('myRadioButton')">

Also you can disable multiple controls at the same time by doing the following:

onClick="toggle('radio1');toggle('radio2');toggle('radio3')"

 

Hope this helps

Thanks AJReading,

 

That is definately getting me closer to what I need. (I'm definately goin to have to teach mysel JavaScript!)

 

here is a link to my page

 

There are still a couple of problems I'm having:

 

1) It only disables one of the radio buttons in the set?

2) It doesn't appear to work with any browser bar IE?

 

Anymore help would be so appreciated!

 

EDIT: I have also just noticed that because I use sticky form elements the function can turn off the radio buttons when the check box is selected and submitted, so I'm not sure I can use this method?

I feel your pain...

 

I've had lots of problems with Javascript and radio buttons before, infact it was a very similar situation to yours.

I will have a play around tomorrow and see what I come up with, its too late to stare at javascript right now

 

You would imagine it would be as simple as looping through the radio button array and disable each one but this has never worked for me. I think i may have a solution though...

thanks for your help people, I've given up using the radio buttons and gone for annoyingly un-customisable select menus instead.

 

here

Hi,

 

I am currently making a form for a website where I need users to be able to check a checkbox and then have a group of radio buttons become available to them.

 

e.g. they select that they want a particular item (through a checkbox), then they select the quantity through a group of radio buttons & if the item is not selected I want the radio buttons to be greyed out.

 

so essentially I want a check box to activate a group of radio buttons when checked, and grey them out when unchecked.

 

I hope this is making sense as it's become really difficult to find anything on google because I don't know if there is a name for what I'm trying to do?

 

Does anybody A.) know what I'm attempting to explain and B.) know how this could be done?

 

Cheers

 

Rich

 

 

 

 

Hi Rich,

 

 

 

To accomplish this first define all radio buttons in a div and by default keep this div hidden, now on onchange event of the checkbox call a JavaScript function which will make the div visible if the checkbox is checked otherwise will hide the div. Hope this helps, if not let me know and I will write for you a small script to explain this.

 

 

 

Thanx,

 

 

Maneet Puri