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,1&은 버튼입니다. 항상 활성화 된 버튼 1 또는 DF 9가 필요합니다. 나는 버튼을 필요 2,3 & 4 DF의 10, 11 & (12)는 "수"내 마지막 체크 상자를 선택합니다. 이 확인란은 DF 8입니다. 도와주세요!

Answer 1

이 코드는 자체적으로 문서화하지 않습니다. 따라서 다른 개발자가 이해하고 유지하는 것은 매우 어렵습니다. 그 점에 대해서도 적극 권장합니다. 의미있는 변수 이름을 사용하는 식으로 시작하십시오.

하지만 문제가 발생한다고 생각합니다. 당신은 onclick 처리기를 df[8]으로 대체 할 때마다 새 기능을 기존 처리기에 연결하는 대신에 재 할당합니다. 단지 마지막 할당 온 클릭 기능이 정말 실행됩니다 이런 식으로.

그래서, 대신

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

을 할 필요가 다시

(나는 또한 장애인 속성을 전환하는 방법을 방법을 단순화 있습니다) , 귀하의 코드가 자체 문서화되지 않습니다. 이것은 실제 문제를 해결할 수도 있고하지 않을 수도 있습니다.

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를 통해 실행 않았다. 이 주장하지 않는 것은 단지 사람들이 "자기 문서화 코드"는 무엇을 의미하는 예 (그러나 바보)를 제공하고 싶었 문제에 대한 최종 모든 솔루션이 될 수 있습니다. 나는 그걸로 더 나아갈 수 있었지만 잘하면 당신은 그 생각을 얻었습니다.

행운을 비네.