Javascript，对象之间的依存关系

问题描述

| 在我的表单上，我有checkBox1，checkBox2，checkBox3，textBox1和textBox2。 默认情况下，只有checkBox1是活动的。当我单击（选中）checkBox1时，checkBox2被激活。当我单击（选中）checkBox2时，checkBox3被激活。最后，当我选中checkBox3时，textBox1和textBox2被激活。 当我取消选中checkBox3时，两个文本框都被禁用。具有取消选中状态的CheckBox2禁用checkBox3。 如何维护这些对象之间的依赖关系？例如，当我取消选中checkBox1时，复选框2和3以及两个文本框都应禁用。     

解决方法

如果您将DOM元素用于复选框和输入框，那么我想说的是，只需在复选框和输入框元素中添加用户定义的属性。就像是

<input type=\"checkbox\" name=\"vehicle\" value=\"Bike\"  dependents=\"inputbox1,inputbox2\" /> 

和onclick，您可以在事件处理程序中访问此属性，例如

arrDependents = element.getAttribute(\"dependents\").split(\",\");

这将返回所有从属ID的数组。     ,这是一个可能的解决方案。在这种情况下，禁用它们时，我会取消选中复选框。如果不需要，请根据需要进行更改： HTML：

Checkbox 1: <input id=\"checkbox1\" type=\"checkbox\" onchange=\"onCheckbox1Changed();\"/>
Checkbox 2: <input id=\"checkbox2\" type=\"checkbox\" onchange=\"onCheckbox2Changed();\"/>
Checkbox 3: <input id=\"checkbox3\" type=\"checkbox\" onchange=\"onCheckbox3Changed();\"/>
Textbox 1: <textarea id=\"textbox1\"></textarea>
Textbox 2: <textarea id=\"textbox2\"></textarea>
<script type=\"text/javascript\">
    //Initialize checkboxes
    onCheckbox1Changed();
    onCheckbox2Changed();
    onCheckbox3Changed();
</script>

的JavaScript

var onCheckbox1Changed = function(checkbox){
    var checkbox1 = document.getElementById(\'checkbox1\');
    var checkbox2 = document.getElementById(\'checkbox2\');

    if(checkbox1.checked){
        checkbox2.disabled = false;
    } else {
        if(checkbox2.checked){
            checkbox2.click();
        }
        checkbox2.disabled = true;
    }
};

var onCheckbox2Changed = function(checkbox){
    var checkbox2 = document.getElementById(\'checkbox2\');
    var checkbox3 = document.getElementById(\'checkbox3\');

    if(checkbox2.checked){
        checkbox3.disabled = false;
    } else {
        if(checkbox3.checked){
            checkbox3.click();
        }
        checkbox3.disabled = true;
    }
};

var onCheckbox3Changed = function(checkbox){
    var checkbox3 = document.getElementById(\'checkbox3\');
    var textbox1 = document.getElementById(\'textbox1\');
    var textbox2 = document.getElementById(\'textbox2\');

    var disabled = !(checkbox3.checked);
    textbox1.disabled = disabled;
    textbox2.disabled = disabled;
};