Member Avatar for abstrand

I'm looking for the coding used to cause a radio button selection to enable a shortlist of checkbox inputs. Conversely, if the radio option not related to the checkboxes is selected, they are grayed out (example below). I thought this would be easy to research, but can't seem to find this subject discussed anywhere.

I'm sure the answer is simple. If anyone could help me out I would really appreciate it.

Example:


O I don't know what my goals are
O I know what my goals are
□ Go faster
□ Get bigger
□ Be stronger

Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mahavir123
Member Avatar for mahavir123

Here my code

<!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 showchks(val)
{
	if(val==0)
	{
		document.getElementById('div1').style.display="block";
		document.frm1.chk1.disabled="disabled";
		document.frm1.chk2.disabled="disabled";
		document.frm1.chk3.disabled="disabled";
		document.getElementById('div1').style.background="#CCCCCC";
	}
	else
	{
		document.frm1.chk1.disabled="";
		document.frm1.chk2.disabled="";
		document.frm1.chk3.disabled="";
		document.getElementById('div1').style.display="block";
		document.getElementById('div1').style.background="#FFFFFF";
	}
}
</script>
</head>

<body>
<form name="frm1">
    <input type="radio" name="rd" value="0" onclick="showchks(this.value)" />
    	I don't know what my goals are <br />
    <input type="radio" name="rd" value="1" onclick="showchks(this.value)" />
    	I know what my goals are <br />
    <div id="div1" style="display:none; width:100px;">
        <input type="checkbox" name="chk1" />Go faster <br />
        <input type="checkbox" name="chk2" />Get bigger <br />
        <input type="checkbox" name="chk3" />Be stronger <br />
    </div>
</form>
</body>
</html>

Enjoy

commented: Very detailed response - thank you! +0
Member Avatar for abstrand

Here my code

<!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 showchks(val)
{
	if(val==0)
	{
		document.getElementById('div1').style.display="block";
		document.frm1.chk1.disabled="disabled";
		document.frm1.chk2.disabled="disabled";
		document.frm1.chk3.disabled="disabled";
		document.getElementById('div1').style.background="#CCCCCC";
	}
	else
	{
		document.frm1.chk1.disabled="";
		document.frm1.chk2.disabled="";
		document.frm1.chk3.disabled="";
		document.getElementById('div1').style.display="block";
		document.getElementById('div1').style.background="#FFFFFF";
	}
}
</script>
</head>

<body>
<form name="frm1">
    <input type="radio" name="rd" value="0" onclick="showchks(this.value)" />
    	I don't know what my goals are <br />
    <input type="radio" name="rd" value="1" onclick="showchks(this.value)" />
    	I know what my goals are <br />
    <div id="div1" style="display:none; width:100px;">
        <input type="checkbox" name="chk1" />Go faster <br />
        <input type="checkbox" name="chk2" />Get bigger <br />
        <input type="checkbox" name="chk3" />Be stronger <br />
    </div>
</form>
</body>
</html>

Enjoy

Using this code it successfully produces the desired result of disabling the checkboxes. However, I am having trouble setting up the page to default to the first radio option with the checkboxes disabled. I realized I have to start out the checkboxes as disabled, however, I cannot seem to make it work. I tried using onload="anotherscript()" with the script setting all checkboxes to disabled. But it doesn't seem to work.

Any thoughts?

Member Avatar for mahavir123

Change the line no 29
<body onload="showchks(0)">

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.