JQuery: Toggle submit button according to if terms are agreed with or not
- by Svish
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.
