Zach Hall Zach Hall - 4 months ago 9
jQuery Question

Disable/Enable Input when checkbox is clicked jQuery

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

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/

Comments