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

Solution 1:

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

id="Calculate"

Solution 2:

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.

<inputtype="checkbox"name="chkbx"id='#ID#'value="#seq_claim_id#"onClick="goFurther(this)" ><INPUTTYPE="Button"id="Calculate"VALUE="Calculate"onClick="FormSubmit();"style="height:35px; width:150px; font-size:medium; font-weight:bold; color:green;"disabled ><script>functiongoFurther(elem){
if (elem.checked == true)
document.getElementById("Calculate").disabled = false;
elsedocument.getElementById("Calculate").disabled = true;
}</script>

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

functiongoFurther(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><INPUTTYPE="Button"id="Calculate"VALUE="Calculate"onClick="FormSubmit();"style="height:35px; width:150px; font-size:medium; font-weight:bold;"disabled >

Solution 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

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


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

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

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