Javascript，對象之間的依賴關係

Question

我的表單上有checkbox1，checkbox2，checkbox3，textbox1和textbox2。

默認情況下，只有checkbox1處於活動狀態。當我點擊（選中）複選框1時，複選框2被激活。當我點擊（選中）複選框2時，複選框3被激活。最後，當我檢查checkbox3時，textbox1和textbox2被激活。

而當我取消選中checkbox3時，兩個文本框都被禁用。帶有取消選中狀態的複選框2會禁用複選框3。

如何維護這些對象之間的依賴關係？例如，當我取消選中複選框1時，複選框2和3以及兩個文本框應該禁用。

Answer 1

如果您使用複選框和輸入框的DOM元素，那麼我會說只是在複選框和輸入框元素中添加一個用戶定義的屬性。有些東西一樣

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

和的onclick你可以在你的事件處理程序訪問該屬性像

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

這將返回所有相關的ID爲陣列。

Answer 2

這是一個可能的解決方案。在這種情況下，我會在禁用時取消選中複選框。如果這不是期望的，根據需要進行更改：

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