Javascript,对象之间的依赖关系
在我的表格上有checkbox1、checkbox2、checkbox3、textbox1和textbox2 默认情况下,只有复选框1处于活动状态。当我单击checkbox1时,checkbox2被激活。当我单击checkbox2时,checkbox3被激活。最后,当我选中checkbox3时,textbox1和textbox2被激活 当我取消选中复选框3时,两个文本框都被禁用。处于取消选中状态的复选框2将禁用复选框3Javascript,对象之间的依赖关系,javascript,javascript-events,Javascript,Javascript Events,在我的表格上有checkbox1、checkbox2、checkbox3、textbox1和textbox2 默认情况下,只有复选框1处于活动状态。当我单击checkbox1时,checkbox2被激活。当我单击checkbox2时,checkbox3被激活。最后,当我选中checkbox3时,textbox1和textbox2被激活 当我取消选中复选框3时,两个文本框都被禁用。处于取消选中状态的复选框2将禁用复选框3 如何维护这些对象之间的依赖关系?例如,当我取消选中复选框1时,复选框2和3以
如何维护这些对象之间的依赖关系?例如,当我取消选中复选框1时,复选框2和3以及两个文本框都应该禁用。如果您对复选框和输入框使用DOM元素,那么我会说只需在复选框和输入框元素中添加一个用户定义的属性。比如
<input type="checkbox" name="vehicle" value="Bike" dependents="inputbox1,inputbox2" />
这将以数组的形式返回所有依赖ID。这里是一个可能的解决方案。在这种情况下,我让它在禁用复选框时取消选中复选框。如果不需要,请根据需要进行更改: HTML:
arrDependents = element.getAttribute("dependents").split(",");
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>
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;
};