Disable multiple checkboxes with javascript - php

Question

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 !

Answer 1

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.

Answer 2

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;
}
}
}