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＆amp; 9是按钮。我总是需要启用按钮1或DF 9。我需要按钮2,3＆amp; 4或DF的10,11＆amp; 12选中我的最后一个复选框时“启用”。这个复选框是DF 8.请帮忙！

Answer 1

此代码不是自我记录的。因此很难维护它并让其他开发人员理解它。我强烈建议你也要这样做。开始使用合理的变量名称等等。

但我认为我看到了问题。通过重新分配它而不是将新函数附加到现有处理程序，您每次覆盖 df[8]的onclick处理程序。这样只有 last 分配的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;
}

（请注意，我还简化了切换禁用属性的方式）

同样，您的代码不是自我记录的。这可能会或可能不会解决您的实际问题。

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运行的。并不是说这是你问题的最终解决方案，只是想通过“自我记录代码”提供人们的意思（但是很愚蠢）。我可以更进一步，但希望你能得到这个想法。

祝你好运。

如何在选中JS中的ONE复选框后启用MULTIPLE按钮

2 个答案: