Problem with form checkboxes

[viki1967]

I need one function javascript that:

1) when I enter in this htm page I see enabled only checkbox of categories A, M and T; checkboxes of microcategories all disabled;

2-a) If I select the checkbox of macrocategory A, M and T checkboxes all disabled;
2-b) If I select the checkbox of macrocategory M, A and T checkboxes all disabled;
2-c) If I select the checkbox of macrocategory T, A and M checkboxes all disabled;

3) If I select the checkbox macrocategory A enable only the checkboxes of microcategories corresponding to macrocategory A;
4) If I select the checkbox macrocategory M enable only the checkboxes of microcategories corresponding to macrocategory M;
5) If I select the checkbox macrocategory T enable only the checkboxes of microcategories corresponding to macrocategory T;

6) One checkbox of macrocategory and one checkbox of microcategory selected for the form it's valid.


My form in the page htm:

<form.... >

<input type="checkbox" name="A" value="A">A
<input type="checkbox" name="IN" value="IN">IN<br>
<input type="checkbox" name="IS" value="IS">IS<br>
<input type="checkbox" name="PA" value="PA">PA<br>

<input type="checkbox" name="M" value="M">M
<input type="checkbox" name="IN" value="IN">IN<br>
<input type="checkbox" name="IS" value="IS">IS<br>
<input type="checkbox" name="PA" value="PA">PA<br>

<input type="checkbox" name="T" value="T">T
<input type="checkbox" name="IN" value="IN">IN<br>
<input type="checkbox" name="IS" value="IS">IS<br>
<input type="checkbox" name="PA" value="PA">PA<br>

</form>

[acoder]

My suggestion:

Use radio buttons for A, M & T; and only have one set of radio buttons for IN, IS and PA:

<form.... >

<input type="radio" name="macro" value="A">A
<input type="radio" name="macro" value="M">M
<input type="radio" name="macro" value="T">T
<input type="radio" name="macrosub" value="IN">IN<br>
<input type="radio" name="macrosub" value="IS">IS<br>
<input type="radio" name="macrosub" value="PA">PA<br>

</form>

Should solve your problem without JavaScript.

[viki1967]

Many thanks Acoder for your suggestion, but I need use this page htm as explained... can you help me?

[Dormilich]

Acoder’s code exactly fits requirements 3 to 6.
requirement 2 does not apply (you can’t select more than one)

[acoder]

And requirement 1 is no longer needed either.

If you insist (or more for the benefit of someone wanting to know how it could be done), set the disabled property of the checkboxes to true/false to disable/enable when a checkbox is clicked. To decide whether to enable/disable, check the "checked" property:

if (chkbox.checked) {
    // enable/disable checkboxes here
}

My opinion: too much unnecessary code for something that can be done with pure HTML. If you want an alternative to radio buttons, use two select boxes:

<select ...>
<option ...>...</option>
...
</select>

[viki1967]

Try this page:

http://www.avia-it.com/testaruba/

[viki1967]

I have changed the input checkbox with input radio:

http://www.avia-it.com/testaruba/

But I have problem with control the exact combination of the radio:

It's OK: http://www.avia-it.com/testaruba/immagine_1.jpg
it's KO: http://www.avia-it.com/testaruba/immagine_2.jpg

Can you help me?

[acoder]

Hmm, ok, it seems you didn't describe the problem properly in the first post.

I assumed that all 3 main options A, M and T had the same sub-options. Since it isn't, and the list of options is long, it would probably be more appropriate to use select drop-downs. Then when, for example, M is selected, the corresponding options are loaded into the second drop-down.

3 basic steps:
1. An array containing the options
2. Two drop-downs in the HTML
3. When the first drop-down option is changed, load the new options into the second one.

PS. you could go the way that you originally stated with checkboxes, but that takes up too much space on the screen.