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

Posted by Svish on Stack Overflow See other posts from Stack Overflow or by Svish
Published on 2010-03-26T16:10:09Z Indexed on 2010/03/26 16:13 UTC
Read the original article Hit count: 395

Filed under:
|
|
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript