Here’s an interesting tidbit of code I worked out today for a client website:
$(document).ready(function() {
$('input.button').attr('disabled', true);
$('input.button').attr('value', 'Please accept our terms to submit');
$('.accept input').bind('click', function() {
if ($('.accept input').is(':checked') == true) {
$('input.button').removeAttr('disabled');
$('input.button').attr('value', 'Send Memory');
} else {
$('input.button').attr('disabled', true);
$('input.button').attr('value', 'Please accept our terms to submit');
}
});
});
It’s JQuery for disabling a submit button until a checkbox is checked. In addition, as an added usability feature, the button says “Please accept our terms to submit” so that the user knows why the button isn’t able to be clicked.
In this example “button” is the class of my button and my terms checkbox is wrapped in a span with a class of “accept” (had to work around ASP.NET here at work thank you).
This post will most definitely be useful if I ever look for this functionality again!