Termos de Uso

Eu fiz um exemplo de termos de uso, aqueles tipo um contrato onde o usuario marca o checkbox dizendo que aceita as condições e só depois ele pode continuar

no meu exemplo só depois que o usuario descer todo scroll que dai ele pode marcar o checkbox

ai vai o exemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Termos de Uso</title>
<meta name=”language” content=”pt-br” />
<meta name=”resource-type” content=”document” />
<meta name=”classification” content=”Internet” />
<meta name=”distribution” content=”Global” />
<meta name=”author” content=”Fabyo” />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta http-equiv=”Pragma” content=”no-cache” />
<meta http-equiv=”Content-Type” content=”text/html;charset=iso-8859-1″ />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(”#labContrato”).addClass(”disabled”);
$(”#contrato”).attr({disabled: “disable”});
$(”#continuar”).attr({disabled: “disabled”});
$(”#contrato”).click(function(){
var check = $(”#contrato”).is(”:checked”) ? false : ‘disabled’;
$(”#continuar”).attr({disabled: check});
if(!check) {
$(”#labContrato”).removeClass(”disabled”);
} else {
$(”#labContrato”).addClass(”disabled”);
}
});

$(”#termos”).scroll(function() {
if ((this.scrollTop + this.clientHeight + 1) >= this.scrollHeight) {
$(”#contrato”).attr({disabled: false});
$(”#labContrato”).addClass(”disabled”);
}
});

});
</script>
<style type=”text/css”>
label.disabled {color: #888;}
label {color: #000; cursor: pointer;}
#termos{
width: 400px;
height: 300px;
padding: 10px 20px;
overflow: auto;
border: 2px solid aaa;
}
</style>
</head>
<body>
<div id=”termos”>
<h1>Termos e Condições Gerais</h1>
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
blablablablablablablabla<br />blablablablablablablabla<br />
</div><br />

<input type=”checkbox” id=”contrato” />
<label for=”contrato” id=”labContrato”>Eu li o contrato e aceito</label><br />
<input type=”button” value=”Continuar >>” id=”continuar” />
</body>
</html>

Funcionando: http://fabyoguimaraes.com/jquery/termo.html