禁用组上的复选框

Question

同样，我需要根据另一个复选框来禁用一些复选框。我正在创建一个表单来注册一个医学会议的参与者。他们可以在某些组中注册(每个组长3小时)，所以如果他们在10am组中注册(通过单击复选框)，他们就不能在11点和12点组中注册(他们应该能够在下午1点注册)。每小时有不规则数量的组(例如，上午10点有3个，上午11点有2个)，这是我需要“验证”的表单的一部分：

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

我该怎么做呢？

非常感谢

Answer 1

如果这些复选框是动态的，则可以通过以下方式实现此目的

1. 具有将每个复选框的id/值与组开始的时间相关联的数据结构。
2. 具有另一个数据结构，其中包含表示同时启动的组的所有复选框。
3. 将onchange事件侦听器添加到复选框，在(1)中的数据结构的帮助下，它将首先找出受影响的复选框所属的时间。然后，在(2)中的数据结构的帮助下，获取受影响的复选框开始时间范围内的所有复选框+3，并将它们全部禁用。

当然，您可以通过将开始时间作为参数传递给将要在onchange事件处理程序上调用的函数来跳过(1)。

对于(2)，如果合适的话，您可以使用<span name="startTimex">将在给定时间开始的所有复选框放入x，并在稍后使用getElementsByName()获取这些复选框。这太脏了。

这将是一个快速而肮脏的解决方案：

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

}

请考虑到，当取消选中某个组时，此功能还将无条件地启用复选框。这可能是一个问题，例如：

1. 用户选择时间为12的组(禁用10、11、12、13和14)，
2. 之后，用户选择时间为16的检查(禁用14、15、16、17)
3. 如果用户取消选中时间为12的组，则在时间14开始的检查将重新启用，此时应禁用这些检查以使16组仍然处于选中状态。

您可以通过在禁用前检查可能影响检查的其他组来处理此问题，或者在所有检查的时间内再次调用checkSelected函数，以禁用所有必须再次禁用的组件。

另外，请记住，这种javascript验证应该始终在服务器端强制执行，以防止禁用js的用户绕过它们。