$(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!

Let’s start with the basics in my file here at work:

To link to a stylesheet:
<link href="PATHTOFILE.css" type="text/css" rel="stylesheet" media="MEDIA" />

“PATHTOFILE.css” is obviously the path to your CSS file, whether relative or absolute. “MEDIA” is what type of media your stylesheet addresses. Options include “screen” for viewing on a normal computer, “print” for when a user prints out your web site, and “handheld” for viewing on a mobile device.

To link to a javascript file:
<script src="PATHTOFILE.js" language="javascript" type="text/javascript"></script>

“PATHTOFILE.js” is the path to your Javascript file, whether relative or absolute.

To link to a favicon:
<link href="PATHTOFILE.ico" rel="shortcut icon"/>

“PATHTOFILE.ico” is the path to your favicon file, whether relative or absolute.

A JQuery ready command:
$(document).ready(function(){
});

This is the most basic JQuery command in which you stuff all other JQuery code into. It basically says “don’t run any of the code in here until the page is fully loaded, or ‘ready’.”

We’ll get more complex later, I promise.