开发者

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

开发者 https://www.devze.com 2022-12-24 01:56 出处:网络
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 tog

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 dis开发者_如何学编程abled 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.


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'));
});
0

精彩评论

暂无评论...
验证码 换一张
取 消