Disabling a CheckBox until a Textarea is scrolled to end


So there are sometimes occasions where I need to have a person who is on a form scroll to the end of a checkbox to try to make sure they have read it. Scrolling to end just means they acknolwdge this even if they don't read it so I created the following jQuery. I found that on some mobile devices it didn't enable the checkbox so I found another check for the scroll and I just added this 2nd check to the code.  In this example it first makes the textarea a read only box, then adds a scroll to the y axis of the text area. Disables the checkbox and adds a watch to the scroll of the text area.

jQuery( document ) .ready( function() {
         jQuery(".class-of-textarea-container textarea").attr("readonly","readonly");
         jQuery(".class-of-textarea-container textarea").attr("overflow-y","scroll");
         jQuery(".class-of-checkbox-container input").attr("disabled","true");
         jQuery(".class-of-textarea-container textarea").scroll(function () {
             if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - jQuery(this).innerHeight() || 
                 jQuery(this).scrollTop() + jQuery(this).innerHeight() >= jQuery(this)[0].scrollHeight ) {
                    jQuery(".class-of-checkbox-container input").removeAttr("disabled");



Posted on

August 14, 2020

Submit a Comment

Your email address will not be published. Required fields are marked *