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

如果这些复选框是动态的，您可以通过

实现这一目标

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

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

对于（2），如果它合适，您可以将所有在给定时间x开始的复选框放在<span name="startTimex">上，稍后使用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 {}
    }
}

}

请注意，取消选择组时，此功能也会无条件启用复选框。例如，这可能是一个问题：

用户选择时间为12的组（禁用10,11,12,13和14），
之后，用户选择时间为16的检查（禁用14,15,16,17）
如果用户在时间12中取消选中该组，则将启用在时间14开始的检查，此时应禁用它们以使16组仍处于选中状态。

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

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

禁用组上的复选框

1 个答案: