Disable/Enable Input when checkbox is clicked jQuery

Question

I'm attempted to only allow the submit button in a form to be enabled when a user has checked off a checkbox. I've gotten the button to start disabled, then become enabled when the checkbox is initially clicked on, but if I then uncheck the checkbox, the button doesn't become re-enabled.

HTML:

<input type="checkbox" id="waivercheck">
<input class="submit join-button" type="submit" value="Join Now" id="joinevent" disabled>

Script:

$(document).ready(function() {
    $('#waivercheck').click(function(){
        if($(this).checked){
            $('#joinevent').prop("disabled",false);   
        } else {
            $('#joinevent').prop("disabled",true);
        }
    });
});

Can anyone help?

Answer 1

You can access the checkbox status via this.checked and not $(this).checked . And I recommend using the change event.

$(document).ready(function() {
    $('#waivercheck').change(function(){        
        if(this.checked){
            $('#joinevent').prop("disabled",false);   
        } else {
            $('#joinevent').prop("disabled",true);
        }
    });
});

Demo: https://jsfiddle.net/rbnndz23/

Answer 2

Your issue is with the conditional.

A jQuery object doesn't have a checked property but the DOM element itself does

Instead of

if($(this).checked)

Can do

// native element has checked property
if(this.checked)

Or

// jQuery is() with pseudo selector
if($(this).is(':checked'))

Answer 3

You don't need to use $(this).checked . Instead try using this.checked . See here .