Enabling/Disabling Multiple Check Boxes

[pornstar]

Hello Javascript gurus! I have a problem. I have a table that has six rows of which has six checkboxes. Each row of checkboxes has the same name.

For example, Row 1 names and IDs would be:

input type=checkbox value="1" name="cat[]"
input type=checkbox value="2" name="cat[]"
and so on...
input type=checkbox value="6" name="cat[]"

Aside from this, I have a two radio buttons of the same name with values either "Yes" or "No". By default, "No" is the setting and the checkboxes above are disabled, but when the user clicks on "Yes", the checkboxes would become active.

How would I be able to enable/disable the checkboxes by the radio button trigger?

Thank you in advance!

[Twey]

Erm... if I were you, I'd give them all ids, and do it thusly.
If you use numerically-based ids, you can do it through a for loop:

<script type="text/javascript">
function disableAllCat() {
for(i = 1; document.getElementById("catbox" + i) !== null; i++) {
document.getElementById("catbox" + i).disabled = true;
}
}

function enableAllCat() {
for(i = 1; document.getElementById("catbox" + i) !== null; i++) {
document.getElementById("catbox" + i).disabled = false;
}
}

disableAllCat(); // disable by default
</script>
<input type="checkbox" name="cat[]" id="cat1"/>
<input type="checkbox" name="cat[]" id="cat2"/>
<input type="checkbox" name="cat[]" id="cat3"/>
<input type="checkbox" name="cat[]" id="cat4"/>
<!-- Add more checkboxes here... -->

<input type="radiobutton" onclick="enableAllCat();"/>Yes<br/>
<input type="radiobutton" onclick="disableAllCat();" checked="1"/>No

[mwinter]

Erm... if I were you, I'd give them all ids [...]

That's not really necessary, and a bit messy in my opinion:

var form  = ...,
    group = form.elements['cat[]'];

for(var i = 0, n = group.length; i < n; ++i) {
  group[i&#93;.disabled = true;
}

and similar for enabling the checkboxes.

<input type="radiobutton"

Just 'radio'.

The nicest way to set the form variable above is to pass it to the function when calling. The code below is generic, but you could hard-code values if you wanted to.

function enableGroup(name, form) {
  var group = form.elements[name];

  for(var i = 0, n = group.length; i < n; ++i) {
    group[i&#93;.disabled = false;
  }
}

<input type="radio" ... onclick="enableGroup('cat[]', this.form);">

Mike

[Twey]

Or, you could do that.
Of course, I meant to say that. It... was... um... a typo. Yeah.

Just 'radio'.

Oops

[pornstar]

hey. it worked! thanks.

[galeal]

Hi Guys,

I'm in a similiar situation but I'd really like to avoid renaming the form elements (the web framework I'm using will be happier if I don't)..

How about wrapping the group in a div and using that? I remember writing some code to do this years ago but I remember it being a pain (have to recurse through the DOM looking for form elements).

Does anyone have some code already written to do that?

Thanks in advance!