jQuery toggleClass example

Toggle class name on click in jQuery

by MrDeveloperR

HTML

<div id='container'>
    <h2>Jquery TOS</h2>
    <p>You must accept the tos before you can continue.</p>
    <div class='rules'>
      <h3>Rules</h3>
      <p style='color: red; font-weight: bold;'>
        <small>
        If you refuse to accept these tos then we are sorry to inform you that you can not continue.
      </small>
    </p>
    <ol>
      <li>We (game name) have the right to change the tos when and as we please without informing you</li>
      <li>You are only allowed 1 account per user</li>
      <li>Selling your items / account for real money is against the rules and will provide in banning</li>
    </ol>
    <h4><p>Some Final Text....</p></h4>
    <input type='checkbox' id='finalcheck' class='checkedbox' />
    <input type='submit' id='accept' classs='bttn' value='Accept Tos' disabled/>
  </div>
  <div id='formContainer'>
  
  </div>
</div>

CSS

body {
  background: #20262e;
  color: #fff;
  font-family: sans-serif, Helvetica;
}
#container {
  width: auto;
  height: auto;
  padding: 5px;
  margin: 0;
}
#container > h2 {
  font-size: 28px;
  color: red;
  text-align: center;
}
#container > p {
  font-size: 15px;
  text-align: center;
}
#container .rules > h3 {
  font-size: 22px;
  color: red;
  text-align: center;
}
#container.rules > .bttn {
  width: auto;
  height: auto;
  padding: 5px;
  background: blue;
  border: 1px solid black;
}

JavaScript

$(document).ready(function() {
	$('#finalcheck').click(function() {
  	if (!$(this).is(':checked')) {
    	$('#accept').attr('disabled', 'disabled');
      $('#formContainer').hide();
    } else {
    	$('#accept').removeAttr('disabled');
    }
  });
  $('#accept').click(function() {
  	//$('#formContainer').show();
    function pageRedirect() {
    	window.location.replace("/login.php");
    }         
    setTimeout(pageRedirect(), 10000);
  });
});