View Full Version : Enable/Disable Form fields (but how to loop it?)

Apr 19th, 2005, 06:01 AM

Well, I have a nice problem for some javascript experts to take a look at.

Here's the webpage: http://www.orient-explorer.com/ICPLMwebsite/Rbook.asp

Now, near the bottom of the page under the "Registration Information" section, you can see that there are two options.

1. The drop down menu's for Option 1 are disabled. The checkboxes for Option 2 are also disabled.

2. When you select the Option 1 radio button, the Option 1 drop down menu's will enable (and also disable Option 2's checkboxes).

3. When you select Option 2's radio button, the Option 2's checkboxes will enable and disable Option 1's drop down menu.

This is how it needs to go, round and round and round in circles :)

The problem is, if you were to do the above. (Select Option 1, then Select Option 2, then go back and Select Option 1 again) you will find that the disabling and enabling stop working.

So... I'm going to ask nicely.. WHY.... and what should I do to make this work?

I am certain the code I am using is no good. If someone could just post me some proper code for this, I would be really thankful!


Apr 19th, 2005, 06:59 AM
You should name the radio buttons the same so that you don't have to code for unchecking the other option when another is clicked.
That's what radio button is for, you can only select one item at a time.
Use <label> tag also for the radio button and checkbox labels so that clicking it will check its associated control. Use label tag also for other controls and discover how it behaves for different controls when the label is clicked. Just take note that you need to specify the associated id of the element in the for attribute.
Here's the code:

function disableEntries(oRad){
var oFrm = oRad.form;

//get the disabled state based on the value of the checked radio button
var state = (oRad.value=="1") ? false : true;

//option 1 fields
oFrm.con_workshop.disabled = state;
oFrm.reg_name.disabled = state;

//option 2 fields
oFrm.day_sel.disabled = !state;
oFrm.day_sel2.disabled = !state;
oFrm.day_sel3.disabled = !state;

<label for="opt1">OPTION 1</label><input type="radio" name="MyRadioButton" id="opt1" onclick="disableEntries(this);" value="1">
...fields for option 1

<label for="opt2">OPTION 2</label><input type="radio" name="MyRadioButton" id="opt2" onclick="disableEntries(this);" value="2">
...fields for option 2

Apr 19th, 2005, 07:11 AM
Thanks for your help. I have to have different names because the information comes from a Database and the values have to be added seperately.

I think I have figured out a way to do this though.

function SetState(obj_checkbox, obj_select)
{ if(obj_checkbox.checked)
{ obj_select.disabled = false;
{ obj_select.disabled = true;

<input type="checkbox" onclick="SetState(this, this.form.reg_name);SetState(this, this.form.con_workshop)">

Apr 19th, 2005, 07:20 AM
I was talking about the 2 radio buttons for Option 1 and Option 2 and not the checkboxes. Have you tried my suggestion?

BTW, I also notice you have 2 disableEntries() functions. You can't have 2 functions with the same name.

Apr 19th, 2005, 07:45 AM
Thanks man, you're a life saver!

About 3 hours ago, I kept saying to myself "I think its that "id" thing, its gotta be that "id"!" I just didn't know how to use it

But now I do, thanks for your help!

A big stamp on your hand!! :thumbsup: :D

Apr 19th, 2005, 08:15 AM
You're welcome! :)

There are better ways to present a user-friendly form especially for large forms. Aside from <label> tags, look into <fieldset> and <legend> tags.


Apr 19th, 2005, 11:18 AM
Thanks! I will look it over.

When I grow up I want to be like you! (You're probably younger than me) :p