disable checkbox on groups

again, i need to disable some checkboxes according to another one. I'm creating a form to register participants on a medical convention. They can register in some groups (each group is 3 hours long), so if they register in the 10am group (by clicking on a checkbox)they cannot register on the 11, 12 am groups (they should be able to register at 1pm). There are irregular number of groups per hour (3 at 10 am, 2 at 11am for example开发者_开发技巧) This is a ppart of the form i need to 'validate':

<form method="post" action="process.php"></form>
<input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br>
<input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic     surgeon<br>
<input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br>
<input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)     <br>
<input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br>
<input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br>
<input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br>
<input type="checkbox" value="122" name="convention8"> 12 am: Open table<br>
<input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on  heart rate<br>
<input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br>
<input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br>
<input type="checkbox" value="141" name="convention12"> 2 pm<br>
<input type="checkbox" value="142" name="convention13"> 2 pm<br>
<input type="checkbox" value="143" name="convention14"> 2 pm<br>
<input type="checkbox" value="151" name="convention15"> 3 pm<br>
<input type="checkbox" value="152" name="convention16"> 3 pm<br>
<input type="checkbox" value="153" name="convention17"> 3 pm<br>
<input type="submit"></input>
</form>

How should i do this?

Many thanks

If those checkboxes are dynamic you could achieve this by

1. Having a data structure that associates every checkbox's id/value with the time the group starts in.
2. Having another data structure that contains all checkboxes that represent groups that start at the same time.
3. Adding an onchange event listener to checkboxes that will firstly find out which time the affected checkbox belongs to with help from the data structure in (1). Then, get all checkboxes that are within the timeframe of the start time of the affected checkbox +3, with help from the data structure in (2), and disable them all.

Of course, you can skip (1) by passing the start time as an argument to the function you'll be invoking on the onchange event handler.

For (2), and if it is suitable, you could put all checkboxes that start at a given time x with a <span name="startTimex">, and get the checkboxes later with a getElementsByName(). This is dirty.

This would be a quick and dirty solution:

<span name="startTime10">
<input type="checkbox" value="101" name="convention1" onchange="checkSelected(this, 10)">
    10 am: Cariovascular desease
</span>
...
<span name="startTime13">
<input type="checkbox" value="132" name="convention10" onchange="checkSelected(this, 13)"> 
    1 pm: Cardiovascular disease (II)
</span>

....

function checkSelected(check, startTime) {
// For each of the time groups that are to be disabled
for (var i = -2; i < 3; i++) {
    var time = "startTime" + (startTime + i);
    var elements = document.getElementsByName(time);
    for (var j = 0; j < elements.length; j++) {
        elem = elements.item(j).childNodes.item(0);
        if (elem != check) {
            elem.disabled = check.checked;
        }
        else {}
    }
}

}

Please take into account that this function will be also inconditionally enabling checkboxes when a group is de-selected. This can be a problem if, for instance:

1. The user selects a group with time 12 (disables 10, 11, 12, 13, and 14),
2. Afterwards, the user selects a check with time 16 (disables 14, 15, 16, 17)
3. If the user unchecks the group with time 12, the checks that start at time 14 will be enabled back, when they should be disabled for having the 16 group still selected.

You could handle this by checking for other groups that might affect a check before disabling, or by invoking the checkSelected function again for all checked times in order to disable all components that must be disabled again.

Also, remember that this kind of javascript validations should always be enforced server-side, in order to prevent that js-disabled users bypass them.