Question

我需要禁用此按钮，当用户选中复选框时需要启用它根本不能为我工作，按钮保持禁用状态，我知道onclick正在调用脚本，因为我发出警报在脚本中，它确实提醒我....

<script type="text/javascript">
function goFurther(){

if (document.getElementById("ID").checked == true)
document.getElementById("Calculate").disabled = false;
else
document.getElementById("Calculate").disabled = true;
}
</script>

<style type="text/css">
input[disabled]
{
   color:Gray; text-decoration:none;
}
</style>



<CFOUTPUT query = "qGetOpenItemsTrans">
    <TR>
        <TD ALIGN = "CENTER">
          <input type="checkbox" name = "chkbx" id='#ID#' value="#seq_claim_id#"           onClick="goFurther()" unchecked = 0   >
        </TD>
        <TD ALIGN = "CENTER">#Inventory_Date#</TD>
        <TD ALIGN = "CENTER">#seq_claim_id#</TD>
        <TD ALIGN = "CENTER">#Month_Closed#</TD>
        <TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD>
        <TD ALIGN = "CENTER">#Commission_Amt#</TD>
        <TD ALIGN = "CENTER">#Net_Recovery#</TD>
    </TR>

<INPUT TYPE ="Button" NAME = "Calculate" VALUE = "Calculate" onClick = "FormSubmit();"     style="height:35px; width:150px; font-size:medium; font-weight:bold; color:green;" disabled >

Answer 1

您正在调用document.getElementById（＆＃34; Calculate＆＃34;），但您的按钮的ID不是＆＃34;计算＆＃34;。

id="Calculate"

Answer 2

除了name属性需要替换为（或添加）id属性之外，您的函数还尝试获取ID值为id的元素。但是，您的ID通过查询循环是动态的。将单击的元素本身传递给goFurther函数，以便直接引用已检查的元素。

<input type="checkbox" name="chkbx" id='#ID#' value="#seq_claim_id#" onClick="goFurther(this)" >

<INPUT TYPE="Button" id="Calculate" VALUE="Calculate" onClick="FormSubmit();" style="height:35px; width:150px; font-size:medium; font-weight:bold; color:green;" disabled >

    <script>function goFurther(elem){
if (elem.checked == true)
document.getElementById("Calculate").disabled = false;
else
document.getElementById("Calculate").disabled = true;
}</script>

您还可以通过执行以下操作进一步简化您的功能：

function goFurther(elem){
    document.getElementById("Calculate").disabled = !elem.checked;
}

<强>更新

你的造型问题。这是由于CSS的工作原理。您在CSS中定义了disabled样式选择器，但您的内联样式设置为color: green，它始终占据任何已定义的样式表。

<style>
input#Calculate {
    color:green;
}
input#Calculate[disabled]
{
   color:Gray; text-decoration:none;
}
</style>

<INPUT TYPE="Button" id="Calculate" VALUE="Calculate" onClick="FormSubmit();" style="height:35px; width:150px; font-size:medium; font-weight:bold;" disabled >

Answer 3

您似乎对“name”和“id”属性感到困惑。

属性“id”允许您访问元素（标记）

属性“name”在表单子元素（如input，button）上定义值的名称。

在您的情况下，您应该更改为

...
<input type="checkbox" name = "chkbx" id='ID' 
  onClick="goFurther(this); return false;">
...


<script type="text/javascript">
 function goFurther(self){
    document.getElementById("Calculate").disabled = !self.checked;
 }
 </script>

我猜这种方式更容易阅读（但仍未经测试）

<INPUT TYPE ="Button" ID = "Calculate" NAME = "Calculate" VALUE = "Calculate"
 onClick = "FormSubmit();" style="height:35px; width:150px; font-size:medium;
 font-weight:bold; color:green;" disabled >

选中复选框后的JavaScript启用按钮

3 个答案: