Disable multiple checkboxes with javascript

I've got a problem with my JS function. I'll explain that to you with my code and a Prt Sc.

Code = http://jsfiddle.net/dKeRf/

This is a Php function and JS function.

Screen = http://img824.imageshack.us/i/antoe.png/

If one of the 2 checkbox over the table is checked, all the checkbox in the two table must be disabled. For the moment It works for the first checkbox, but not开发者_高级运维 for the second, and I ask you why ? :)

I use '10' in my 'For' jut for a test, I'll change that latter by the number of row of the table.

Thanks for your help and have a good day !

---

Add a class to all of the checkboxes:

<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>

Then use jquery to update all of the checkboxes at once:

<script>
$(document).ready(function(){
    $(".selectAll").click(function() {
        if($(".selectAll").attr("checked")) {
            $(".the_checkbox:checkbox").attr("disabled", true);
        } else {
            $(".the_checkbox:checkbox").removeAttr("disabled");
        }
    });        
});
</script>

UPDATE: Changes the answer to use the .class name for updating the checkboxes instead of the ID so that the ID can remain unique and conform to HTML standards.

---

IDs are not allowed to start with a number, they must start with a letter. So document.getElementById(1234) will fail (I think IE might not say anything and allow it, but FF doesn't work). You should be ok with just putting a letter in front of the number and change the getElementById to document.getElementById('cb'+id2);.

Also, just a side note, if you are passing in this to a function onClick, that parameter is a reference to the element that was clicked. So there is no need to get box.id and then do document.getElementById(checkId). technically document.getElementById(checkId) is === box so you could just say box.checked.

http://www.w3.org/TR/html4/types.html#h-6.2. This is the spec that talks about ID attribute naming requirements:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Edit:

Even better than using document.getElementById() to select each checkbox, would be to use document.getElementById() on a parent element that the checkboxes you want to disable share (such as the table they are in) and then use document.getElementsByTagName('input') to get a collection of all the checkboxes and loop/disable them with that. So the JS disable code would look like:

Some table:

<input type='checkbox' onClick='checkCBs(this,"someTable1");'>
<table id='someTable1'>
  <tr>
    <td>This is checkbox 1:</td>
    <td><input type='checkbox' name='group1' value='checkbox1'></td>
  </tr>
  <tr>
    <td>This is checkbox 2:</td>
    <td><input type='checkbox' name='group1' value='checkbox2'></td>
  </tr>
</table>

The code:

function checkCBs(box, parent){
    var parent = document.getElementById(parent),
        CBs = parent.getElementsByTagName('input'),
        i;
    //loop through all input elements
    for(i=0;i<CBs.length;i++){
        //make sure the input is a checkbox
        if(CBs[i].type && CBs[i].type=='checkbox'){
            //set disabled on this checkbox to opposite
            //of whether box is checked.
            CBs[i].disabled = !box.checked;
        }
    }

}