JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="scrollPane" style="height:150px;overflow-y:scroll;">
 <div class="inner">
  Terms of service jargon stuff here
 </div>
</div>
<input name="TERMS_ACCEPTED_YN" type="checkbox" id="TERMS_ACCEPTED_YN" value="Y"/><label>I accept the blah, blah, blah.</label>

JavaScript

jQuery(document).ready(function() {
    jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
     
    var $box = $("#scrollPane"),
    $inner = $("> .inner", $box),
    innerOuterHeight = $inner.outerHeight();
    boxHeight = $box.height();
    boxOffsetTop = $box.offset().top;
     
    jQuery("#scrollPane").scroll(function() {
        if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
        jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
    }
 });
});