Check if checkbox is checked and disabling button not working

Question

I am trying to disable a button when a checkbox is not checked and enable it again when it's checked.

So to test I added a console log inside the code, but there is no message in my console when I check the checkbox.

My code:

the_terms.click(function() {
            console.log('test');
        if (jQuery(this).is(":checked")) {
            jQuery("#checkoutbtn").removeAttr("disabled");
        } else {
            jQuery("#checkoutbtn").attr("disabled", "disabled");
        }
    });

Then the button and checkbox:

<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="button btn-checkout" id="checkoutbtn" onclick="review.save();" disabled="disabled"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox" id="voorwaarden" style="display:inline;"/><b> Ik ga akkoord met de algemene voorwaarden</b></p>

What's wrong?

`jQuery(this).is(":checked")` is a **really** long-winded way to write `this.checked`. Just FWIW. Also note that `disabled` is properly manipulated with `prop`, which accepts a handy boolean, so that whole `if/else` could be replaced with: `$("#checkoutbtn").prop("disabled", !this.checked);` — T.J. Crowder, Aug 30 '17 at 14:31
Possible duplicate of [How to disable/enable a button with a checkbox if checked](https://stackoverflow.com/questions/18110865/how-to-disable-enable-a-button-with-a-checkbox-if-checked) — Vikas Gupta, Aug 30 '17 at 14:35

Jamiec · Accepted Answer · 2017-08-30T14:51:24.737

1

In the code you've provided the_terms is never defined. You checkbox has an id of voorwaarden use it in a jquery id selector.

jQuery('#voorwaarden').click(function() {
    console.log('test');
    if (jQuery(this).is(":checked")) {
        jQuery("#checkoutbtn").removeAttr("disabled");
    } else {
        jQuery("#checkoutbtn").attr("disabled", "disabled");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button type="submit" class="button btn-checkout" id="checkoutbtn" onclick="review.save();" disabled="disabled"><span>Place Order</span></button>
<p><input type="checkbox" class="checkbox" id="voorwaarden" style="display:inline;"/><b> Ik ga akkoord met de algemene voorwaarden</b></p>

As commented, you should probably use a .change handler not a .click and if (jQuery(this).is(":checked")) would be better written as if(this.checked).

More appropriate code for your intention would be

jQuery('#voorwaarden').change(function() {
    jQuery("#checkoutbtn").prop('disabled', !this.checked)
});

And if you're dynamically adding the checkbox after page load use this

jQuery(document).on('change','#voorwaarden', function() {
    jQuery("#checkoutbtn").prop('disabled', !this.checked)
});

edited Aug 30 '17 at 14:51

answered Aug 30 '17 at 14:31

Jamiec

133,658
13
134
193

Use a `.change` function instea of `click` - mines well do `this.checked` as well. – tymeJV Aug 30 '17 at 14:32
@tymeJV the appropriate use of event handlers and properties are outside of the scope of this question. I do agree with you though. – Jamiec Aug 30 '17 at 14:33
I have to agree with @tymeJV "disable a button when a checkbox is not checked" does not imply click at all... it IS in the scope of the question to apply the disable when the checkbox gets checked, not when it gets clicked. – Salketer Aug 30 '17 at 14:36
@Salketer there is little difference with a checkbox. a click implies a change. But once again, I agree with you both – Jamiec Aug 30 '17 at 14:49
For some reason a console log is never fired for me. Maybe i should mention I am using magento, not that I know why that would matter because I made a custom js script in the same file that works just fine. When I add a console log outside of the function it shows like normal. – twan Aug 30 '17 at 14:51
@twan your element probably doesnt exists when you try to add the event handler. Try using `on` rather than `click` (or `change`). See updated answer. – Jamiec Aug 30 '17 at 14:52
@Jamiec without getting too picky, "a click implies a change" but a change can be triggered by a number of other events... I'm not trying to pick on you, trying to help everyone get/provide best answer possible :) – Salketer Aug 30 '17 at 15:00
@Salketer so can a click (and that inits a change). What's your point? – Jamiec Aug 30 '17 at 15:00
@Jamiec using the keyboard to (un)check the box wouldn't enable/disable the button. I also don't think that clicking a label triggers a click on the linked element, but it does change the checked attribute... – Salketer Aug 30 '17 at 15:09
None of these (change/click/on) work for me, I don't even see the console log. What could it be? I am using a .toggle in a script just below it that works fine. And when I add the console log out of the function, it shows right away. – twan Aug 31 '17 at 08:30
@twan update your question with a [mcve] using the stacksnippet button to demonstrate the exact issue. – Jamiec Aug 31 '17 at 08:37
@Jamiec I just got it to work with your code! It appears the checkbox was added after the pageload Thanks! – twan Aug 31 '17 at 09:26

Check if checkbox is checked and disabling button not working

1 Answers1