Question

I need to enable 3 buttons, after checking the LAST check box on my page using JS. The code I currently have is as follows:

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

I need to add two more buttons to this script. When I script it this way, it only works with the last button.

<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’s 12,11,10 & 9 are buttons. I need button 1 or DF 9 enabled always. I need buttons 2,3 & 4 or DF’s 10,11 & 12 to “enable” when my last check box is checked. This checkbox is DF 8. Please help!

Answer 1

This code is not self-documenting. It’s therefore very hard to maintain it and to get it understood by other developers. I strongly recommend you to work on that as well. Start using sensible variable names and so on.

But I think I see the problem. You’re overriding the onclick handler of df[8] everytime by reassigning it instead of attaching a new function to the existing handler. This way only the last assigned onclick function will really execute.

So, instead of

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

you need to do

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

(note that I also simplified the way how you’re toggling the disabled attribute)

Again, your code is not self-documenting. This may or may not solve your real problem.