如何在選中JS中的一個複選框後啓用多個按鈕

Question

我需要在使用JS在我的頁面上檢查最後一個複選框後啓用3個按鈕。我目前擁有的代碼如下：

<script type="text/javascript"> 
<!-- 
window.onload=function() { 
    df=document.forms[0]; 
    df[1].disabled=true; 
    df[0].onclick=function(){ 
    df[1].disabled=(df[1].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[2].disabled=true; 
    df[1].onclick=function(){ 
    df[2].disabled=(df[2].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[3].disabled=true; 
    df[2].onclick=function(){ 
    df[3].disabled=(df[3].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[4].disabled=true; 
    df[3].onclick=function(){ 
    df[4].disabled=(df[4].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[5].disabled=true; 
    df[4].onclick=function(){ 
    df[5].disabled=(df[5].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[6].disabled=true; 
    df[5].onclick=function(){ 
    df[6].disabled=(df[6].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[7].disabled=true; 
    df[6].onclick=function(){ 
    df[7].disabled=(df[7].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[8].disabled=true; 
    df[7].onclick=function(){ 
    df[8].disabled=(df[8].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[10].disabled=true; 
    df[8].onclick=function(){ 
    df[10].disabled=(df[10].disabled)?false:true; 
    } 
} 
//--> 

我需要兩個按鈕添加到這個腳本。當我用這種方式編寫腳本時，它只適用於最後一個按鈕。

<script type="text/javascript"> 
<!-- 
window.onload=function() { 
    df=document.forms[0]; 
    df[1].disabled=true; 
    df[0].onclick=function(){ 
    df[1].disabled=(df[1].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[2].disabled=true; 
    df[1].onclick=function(){ 
    df[2].disabled=(df[2].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[3].disabled=true; 
    df[2].onclick=function(){ 
    df[3].disabled=(df[3].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[4].disabled=true; 
    df[3].onclick=function(){ 
    df[4].disabled=(df[4].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[5].disabled=true; 
    df[4].onclick=function(){ 
    df[5].disabled=(df[5].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[6].disabled=true; 
    df[5].onclick=function(){ 
    df[6].disabled=(df[6].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[7].disabled=true; 
    df[6].onclick=function(){ 
    df[7].disabled=(df[7].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[8].disabled=true; 
    df[7].onclick=function(){ 
    df[8].disabled=(df[8].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[10].disabled=true; 
    df[8].onclick=function(){ 
    df[10].disabled=(df[10].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[11].disabled=true; 
    df[8].onclick=function(){ 
    df[11].disabled=(df[11].disabled)?false:true; 
    } 
    df=document.forms[0]; 
    df[12].disabled=true; 
    df[8].onclick=function(){ 
    df[12].disabled=(df[12].disabled)?false:true; 
    } 
} 
//--> 
</script> 

DF的12,11,10 & 9按鈕。我需要按鈕1或DF 9始終啓用。我需要按鈕2,3 & 4或DF的10,11 & 12當我最後一個複選框被選中時「啓用」。這個複選框是DF 8.請幫忙！

Answer 1

此代碼不是自我記錄。因此很難維護它並讓其他開發人員瞭解它。我強烈建議您也參與其中。開始使用明智的變量名稱等等。

但我想我看到了問題。你是每次通過重新分配它而不是將一個新函數附加到現有的處理程序，覆蓋df[8]的onclick處理程序。這樣只有最後分配的onclick函數纔會真正執行。

所以，與其

df=document.forms[0]; 
df[10].disabled=true; 
df[8].onclick=function(){ 
    df[10].disabled=(df[10].disabled)?false:true; 
} 
df=document.forms[0]; 
df[11].disabled=true; 
df[8].onclick=function(){ 
    df[11].disabled=(df[11].disabled)?false:true; 
} 
df=document.forms[0]; 
df[12].disabled=true; 
df[8].onclick=function(){ 
    df[12].disabled=(df[12].disabled)?false:true; 
} 

你需要做的

df = document.forms[0]; 

df[10].disabled = true; 
df[11].disabled = true; 
df[12].disabled = true; 

df[8].onclick = function() { 
    df[10].disabled = !df[10].disabled; 
    df[11].disabled = !df[11].disabled; 
    df[12].disabled = !df[12].disabled; 
} 

（請注意，我還簡化了你怎麼切換disabled屬性的方式）

再次，你的代碼不是自我記錄的。這可能會或可能無法解決您的實際問題。

Answer 2

幹。這是一個編程範例，「不要重複自己」。你的代碼是使用循環來處理邏輯的完美人選。也正如其他人所提到的那樣，自我記錄代碼對於您和爲您的代碼工作的未來開發人員都非常有用。

這裏有一個例子

var controlls = 12, 
    alwaysOn = new Array(controlls), 
    form  = document.forms[0]; 

// These never get disabled 
alwaysOn[0] = true; 
alwaysOn[9] = true; 

// Handle the general case 
for(var i=0; i<controlls; i++){ 
    // Disable unless never disabled 
    form[i].disabled = !alwaysOn[i]; 

    // This input disables it's younger sibling, unless that sibling is never disabled 
    if(!alwaysOn[i+1]){ 
     form[i].onclick = function(){ 
      form[i+1].disabled = !form[i+1].disabled; 
     } 
    } 
} 

// Handle the special case, explicitly 
form[8].onclick = function(){ 
    form[10].disabled = !form[10].disabled; 
    form[11].disabled = !form[11].disabled; 
    form[12].disabled = !form[12].disabled; 
} 

我沒有測試這個代碼，但我沒有通過JSLint的運行它。不要聲稱這是你的問題的最終解決方案，只是想提供一個例子（無論如何愚蠢）人們所說的「自我記錄代碼」。我本可以更進一步，但希望你能明白。

祝你好運。