JavaScript enable button when checkbox checked

Question

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 >

possible duplicate of jQuery disabled button with checkbox issue — Lesha Ogonkov
– Lesha Ogonkov, Commented Oct 8, 2014 at 18:06

Seano666 · Accepted Answer · 2014-10-08 18:08:04Z

4

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

id="Calculate"

answered Oct 8, 2014 at 18:08

Seano666

2,2381 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Katherine Pacheco Over a year ago

good catch, i did add that but still does disabled when i checkmark the checkbox

Tristan Lee · Accepted Answer · 2014-10-08 18:29:27Z

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 >

edited Oct 8, 2014 at 18:29

answered Oct 8, 2014 at 18:17

Tristan Lee

1,22011 silver badges18 bronze badges

3 Comments

Katherine Pacheco Over a year ago

Thank you this worked perfect the only thing I cant get the style of the button to change. depending if its disabled i want it that gray style

Dan Bracuk Over a year ago

Make sure you test this thoroughly. The checkbox has an onClick event but it's possible to navigate html forms and check/uncheck checkboxes using only a keyboard.

Tristan Lee Over a year ago

@DanBracuk, even using the keyboard, hitting the spacebar to check the box also fires the event. Agreed though regarding testing this thoroughly.

stefan bachert · Accepted Answer · 2014-10-08 18:24:41Z

0

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 >

edited Oct 8, 2014 at 18:24

answered Oct 8, 2014 at 18:14

stefan bachert

9,6945 gold badges36 silver badges42 bronze badges

Collectives™ on Stack Overflow

JavaScript enable button when checkbox checked

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related