JavaScript enable button when checkbox checked

问题

I need to have this button disabled, and when the user checks a checkbox it needs to be enabled its just not working for me at all, the button stays disabled, i know the onclick is calling the script because i placed an alert in the script and it does alert me....

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

回答1:

In addition to your name attribute needing replaced by (or added with) id attibute, your function is also trying to get an element with the ID value of id. However, your IDs are dynamic via your query loop. Pass the clicked element itself to the goFurther function so you have direct reference to the checked element.

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

You may also simplify your function further by doing the following:

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

UPDATE:

To your styling issue. this is due to how CSS works. You have a disabled style selector defined in your CSS, but your in-line style is set to color: green which will always take presidence over any defined stylesheets.

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

回答2:

You are calling document.getElementById("Calculate"), but your button does not have an id of "Calculate".

id="Calculate"

回答3:

You seems to be confused with the attributes "name" and "id".

The attribute "id" give you access to an element (tag)

The attribute "name" defines on form child elements (like input, button) the name of the value.

In your case you should change to

...
<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>

I guess this way it much easier to read (but still untested)

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

来源：https://stackoverflow.com/questions/26263494/javascript-enable-button-when-checkbox-checked

标签

javascript

coldfusion