Disable and enable button with checkbox checked

Question

I have a button on my form which is disabled by default

<input disabled type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="subscribe__button">

I also have a optin checkbox:

 <label class="subscribe__optin">
     <input id="optin" type="checkbox" value="true" name="optin"> Ja, ik ga akkoord met de privacyverklaring
 </label>

The idea is, if the checkbox is selected, the button must be clickable. But if you unselect the checkbox again after it's selected, the button must be disabled.

My jQuery code is:

$("#optin").on("change", function(e){
        if($("#optin").attr("checked")){
            $("#mc-embedded-subscribe").attr('disabled','disabled');
            console.log('checked');
        } else {
            $("#mc-embedded-subscribe").removeAttr('disabled');
            console.log('not checked');
        }
});

When I click on the checkbox, I always get 'not checked' in my console. What am I doing wrong over here? I already checked some other example here on stackoverflow, but none of these seem the help my problem.

Check the syntax for .attr() you are failing to check what you would like to — user2399035
– user2399035, Commented Nov 6, 2018 at 14:52
Possible duplicate of How to check whether a checkbox is checked in jQuery? — lumio
– lumio, Commented Nov 6, 2018 at 14:52

NitinSingh · Accepted Answer · 2018-11-06 15:02:59Z

1

http://api.jquery.com/prop/

It's the difference between attributes and properties, just that while developing, we hardly regard the difference and treat both as same.

answered Nov 6, 2018 at 15:02

NitinSingh

2,0781 gold badge21 silver badges36 bronze badges

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

Comments

Dennis · Accepted Answer · 2018-11-06 14:53:07Z

0

Already found a solution. It seems that .attr() was the issue. I have to use .prop()

$("#optin").on("change", function(e){
        if($("#optin").prop("checked")){
            $("#mc-embedded-subscribe").removeAttr('disabled');
            console.log('enabled');
        } else {
            $("#mc-embedded-subscribe").attr('disabled','disabled');
            console.log('disabled');

        }
});

answered Nov 6, 2018 at 14:53

Dennis

5503 silver badges27 bronze badges

Comments

qocu · Accepted Answer · 2018-11-06 14:58:05Z

0

Instead of using

    if($("#optin").attr("checked")){

try:

    if($(this)[0].checked){

answered Nov 6, 2018 at 14:58

qocu

4055 silver badges15 bronze badges

Collectives™ on Stack Overflow

Disable and enable button with checkbox checked

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related