Deactive Checkbox until User Reads Terms of Use

Blog Deactive Checkbox until User Reads Terms of Use

May 19, 2013 CSS, Development, HTML, jQuery Social Share

In the signup area of an automated system I’m creating, there is a terms of use that should be read before the user continues filling out the form.

First, I deactivated a checkbox which had the label “I agree to the above terms.” When the user scrolled to the bottom of a container holding the agreement text, the checkbox would activate and be able to be ticked.

The user was also not allowed to continue to the next page of the form without checking the box. For this reason, I also deactivated the next button so the user had no choice but to scroll down and hopefully read the text they were agreeing to. The answer came, as many do, via Stack Overflow where user Kumu posted an accepted solution to this issue.

jQuery

function disclaimer_function()
{
     $("#acknowledge-outer").scroll(function()
     {
          var outer = $(this);
          var inner = $(">#acknowledge-inner", $(this));
          var scroll = 1;
          if(outer.offset().top < inner.outerHeight())
          {
               scroll = -1;
          }
          if (Math.round((scroll * inner.offset().top) + outer.height() + 
          outer.offset().top) >= inner.outerHeight() &&
          Math.abs(inner.offset().top) != 0)
          {
               $("input#acknowledge-checkbox").attr("disabled", false);
               $(this).unbind("scroll");
          }
          else
          {
               $("input#acknowledge-checkbox").attr("disabled", true);
          }
     });
}

// Upon agreeing to disclaimer, restore submit button
$("#contract").click(function()
{
	var checked_status = this.checked;
	if (checked_status == true)
	{
		$("a.submit").css('display', 'block');
	}
	else
	{
		$("a.submit").css('display', 'none');
	}
});

CSS

#acknowledge-outer {float: left; width: 100%; height: 300px; overflow: auto;}
#acknowledge-inner {float: left;}

HTML

<div id="acknowledge-outer">
      <div id="acknowledge-innter">Terms of Use Here</div>
</div>
<input id="acknowledge-checkbox" type="checkbox" disabled="disabled" /> I agree to 
the above terms

The function that Kumu wrote tied right into my code and the terms of use was complete. If the contract terms are important, this is a good bit of code to at least ensure the user gave some effort and scrolled down. The chance they actually read the text is still slim but we’ve given it our best shot.

Instead of hiding the form next button, we could use monotone colors to show the deactivated state to the user. Then, in case the user skips our notification about reading the agreement, we could add a tooltip that shows on hover of the deactivated next button. With something simple like “To continue, please read the terms of use and agree to them via the corresponding checkbox.”

If you have any code improvements or other suggestions, please voice your thoughts in the comments below.