JSの1つのチェックボックスをオンにした後に複数のボタンを有効にする方法

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

私は、このスクリプトに2つのボタンを追加する必要があります。このようにスクリプトを作成すると、最後のボタンでのみ機能します。

<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,1&はボタンである。ボタン1またはDF 9が常に有効になっている必要があります。最後のチェックボックスをオンにすると、2,4のボタンまたはDFの10,11 & 12のボタンが有効になっている必要があります。このチェックボックスはDF 8です。助けてください！

Answer 1

このコードは自己文書化ではありません。したがって、それを維持し、他の開発者に理解させることは非常に困難です。私も強くそれに取り組むことを強くお勧めします。分かりやすい変数名などを使い始める。

しかし、私は問題があると思う。 をonclickハンドラdf[8]をオーバーライドするたびに、既存のハンドラに新しい関数をアタッチするのではなく、そのアサインを再割り当てします。この方法では、の最後のに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

DRY。これはプログラミングのパラダイムであり、「自分自身を繰り返さないでください」。あなたのコードは、ロジックを処理するためにループを使用するのに最適な候補です。また、他の人が触れたように、自己文書化コードは、あなたとあなたのコードを扱う将来の開発者の両方にとって非常に便利です。

は、ここでは一例

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を通してそれを実行しました。これをあなたの問題の最後の解決策とは言わず、「自己文書化コード」によって人々が意味するものの例を提供したかっただけです。私はそれをさらに進めることができたかもしれないが、うまくいけばあなたはそのアイデアを得る。

幸運。