Radio button to enable otherwise locked section

[magikeys]

I'm having trouble programming a radio button to enable a group of checkbox options. I want the group to be disabled unless the radio is selected.

Can I use:

document.getElementById("").disabled=true/false

for a <div> section?

Here's what I have so far.
function:

function disableSection() {
	if (document.forms.radio.checked)
		document.getElementById("optionalinfo").disabled = false;
	else
		document.getELementById("optionalinfo").disabled = true;
		}

HTML:

<input type="radio" name="additionalinfo" value="yes"/>Yes! Please sign me up for the following items:<br/>
					<div><blockquote><input id="optionalinfo" type="checkbox" name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i>AMT</i></font>'s monthly E-Zine, <b>"Glorious Morning Muffins"</b>.</br>
					<input id="optionalinfo" type="checkbox" name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i>AMT</i></font> updates.</br>
					<input id="optionalinfo" type="checkbox" name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i>AMT</i></font>.<br/>
					<input id="optionalinfo" type="checkbox" name="additional" value="userRegister"/>I need to register to log in</blockquote></div>

In addition to this, I would like the section to fade when disabled. Thanks for any help... again!

[Old Pedant]

For starters, it's illegal to use the same ID for more than one tag.

In any case, you don't care. You need/want to use the checkbox *NAME(S)*.

<input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional);"/>
     Yes! Please sign me up for the following items:<br/>
<input  type="checkbox" disabled name="additional" value="newsletter"/> ...
<input  type="checkbox" disabled name="additional" value="Updates"/> ...
etc. ...

and then:

function enableSelection(cbs)
{
    for ( var c = 0; c < cbs.length; ++c )
    {
        cbs[c].disabled = false;
    }
}

With only one radio button, there is no way to un-check it, so if the person clicks on it, the change of disabled to false in the checkboxes is one-way.

Notice that passing this.form.additional to the function passes the *array* of checkboxes, automatically.

[Old Pedant]

Regarding fading when disabled: ???? But it *MUST* start up disabled! No choice, if using a radio button to enable. You mean fade in when enabled?

[magikeys]

Regarding fading when disabled: ???? But it *MUST* start up disabled! No choice, if using a radio button to enable. You mean fade in when enabled?

Yes. That's what I meant. I would like the section to fade in when it is enabled. However, my bigger concern at this moment is that while your earlier code was successful at disabling the section upon loading, the section is not enabled when the radio is selected. I entered it in exact, and I can't see why.

[magikeys]

Also, the enabling radio button is a "yes" option. But, I do also have a radio button that is a "no" option, that would reverse the previous, or at least leave the section disabled.

Here's the code again:

<input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional);"/>Yes! Please sign me up for the following items:<br/>
<blockquote>

<input type="checkbox" disabled name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i><b>AMT</b></i></font>'s monthly E-Zine, <b>"Glorious Morning <br/>

<input type="checkbox" disabled name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i><b>AMT</b></i></font> updates.<br/>

<input type="checkbox" disabled name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i><b>AMT</b></i></font>.<br/>

<input type="checkbox" disabled name="additional" value="userRegister" onclick="showUserReg()"/> Register me for my own <font color="ff69b4"><i><b>AMT</b></i></font> <b>username</b> and <b>password</b>.<br/	</span></blockquote>

<input type="radio" name="additionalinfo" value="no"/>No thank you. I would not like to receive additional resources from <font color="ff69b4"><i><b>AMT</b></i></font> at this time.

And the function:

function enableSelection(cbs)
{
    for ( var c = 0; c < cbs.length; ++c )
    {
        cbs[c].disabled = false;
    }
}

Anyway, I really appreciate you helping me with this. I'm learning so much.

[jmrker]

You had a few typo errors, a spurious </span> tag and a missing <form> tag.

I added a bit of logic to reset the selections if the user changes their mind.

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function enableSection(cbs, flag) {
  for ( var c=0; c<cbs.length; ++c ) {
    cbs[c].disabled = flag;
    if (flag) { cbs[c].checked = !flag; }
  }
}
</script>

</head>
<body>
<form>
<input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional,false);"/>
Yes! Please sign me up for the following items:<br/>

<blockquote>
 <input type="checkbox" disabled name="additional" value="newsletter"/>
 I wish to receive
 <font color="ff69b4"> <i><b>AMT</b></i></font>'s monthly E-Zine, <b>"Glorious Morning <br/>

 <input type="checkbox" disabled name="additional" value="Updates"/>
 I wish to receive
 <font color="ff69b4"><i><b>AMT</b></i></font> updates.<br/>

 <input type="checkbox" disabled name="additional" value="future"/>
 Keep me posted about future offerings at
 <font color="ff69b4"><i><b>AMT</b></i></font>.<br/>

 <input type="checkbox" disabled name="additional" value="userRegister" onclick="showUserReg()"/>
 Register me for my own
 <font color="ff69b4"><i><b>AMT</b></i></font>
 <b>username</b> and <b>password</b>.<br />
</blockquote>

<input type="radio" name="additionalinfo" value="no"  onclick="enableSection(this.form.additional,true);"/>
No thank you. I would not like to receive additional resources from
<font color="ff69b4"><i><b>AMT</b></i></font> at this time.

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

Good Luck!


PS: You are also missing the "ShowUserReg()" function definition.

[Old Pedant]

Hey, I thought <font> was deprecated!

And we still haven't shown him fadein/fadeout.

[jmrker]

Hey, I thought <font> was deprecated!

And we still haven't shown him fadein/fadeout.

So did I, but I can't fix all the mistakes in the world!

Sorry, I guess I read the thread too fast and missed the fadein/out request.

But at least he/she has some working code to start modifications from,
which is more than they had before!

[magikeys]

Thank you so very much everyone. As I've said before, I'm brand new at this stuff in that I've only just begun teaching myself, with your assistance, for the past couple of weeks. And, while I've managed to blow through HTML and CSS quickly, I've found javascript challenging.

So, thank you again for your willingness to help me. I'm trying to break your codes down to their basic parts in order to learn how they work, and then trying to get a handle on the logic. It's coming along, but slowly.

Anyway, I appreciate it all. I'll be back.

Oh, and thanks for the heads up on the deprecation of <font>. I guess I need to pay a little more attention to W3C stuff. Oops! I've switched it all over to css now.

[magikeys]

Extra thanks to jmrker. Your code was spot on. Awesome! Thank you, thank you, thank you.

[jmrker]

Extra thanks to jmrker. Your code was spot on. Awesome! Thank you, thank you, thank you.

You're most welcome, I'm sure, from both of us.
We're both happy to help.

I tend to follow 'Old Pedant's posts as I usually learn something from his insights.

Good Luck!