JQuery: Toggle submit button according to if terms are agreed with or not

Question

I have a checkbox with id terms and a submit button in my form with class registration. I would like the submit button to be disabled initially, and then to be toggled on and off whenever the user toggle on and off the terms checkbox. I would also like to have a confirmation dialog pop up when the submit button is clicked and that if it is confirmed the submit button will be disabled again (to prevent duplicate clicking). I have gotten the last part and the first part working (I think), but I can't figure out how to get the toggling working. This is what I have so far:

$(document).ready(function() {

    // Disable submit button initially
    $('form.registration input[type=submit]').attr('disabled', 'disabled');

    // Toggle submit button whenever the terms are accepted or rejected
    $('#terms').change(function() {

        if($('#terms:checked').val() !== null)
            $('input[type=submit]', this).attr('disabled', '');
        else
            $('input[type=submit]', this).attr('disabled', 'disabled');

    });

    // Ask for confirmation on submit and disable submit button if ok
    $('form.registration').submit(function() {

        if(confirm('Have you looked over your registration? Is everything correct?')) {
            $('input[type=submit]', this).attr('disabled', 'disabled');
            return true;
        }

        return false;

    });

});

Could someone help me make this work? I'm a total JQuery newb at the moment, so any simplifications and fixes are welcome as well.

Answer 1

This portion:

$('#terms').change(function() {
    if($('#terms:checked').val() !== null)
        $('input[type=submit]', this).attr('disabled', '');
    else
        $('input[type=submit]', this).attr('disabled', 'disabled');
});

Will only look for a submit button inside the #terms element (that's the , this part). I think this is what you want:

$('#terms').change(function() {
   $('input[type=submit]').attr('disabled', !$(this).is(':checked'));
});