Scrolling div must be scrolled to bottom before you can check a checkbox

]I have a div that contains a disclaimer, I want to make sure someone has scrolled to the bottom of the disclaimer before you can check the checkbox acknowledging you have read the disclaimer. Legal Dept. Here is a sample markup:

<div id="step2Disclaimer" style="height:50px;overflow-y:scroll">
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>                             
</div>

<input type="checkbox" id="acknowledge" name="acknowledge" value="true">
<label class="styled" for="acknowledge">I acknowledge</label>

I can detect when someone scrolls to the bottom of #acknowledge like this:

$('#step2Disclaimer').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
    alert('end reached');
    }
});

What I need to do, and am somehow missing, is on change of "acknowledge" check to see if someone has scrolled. The condition isn't working -> to clarify, if someone checks the checkbox "acknowledge" and HAS NOT scrolled to the bottom of "step2Disclaimer" I need to run a function.

$(function() {
    $('input[name="acknowledge"]').change(function(){
        if ($(this).is(':checked') && ($('#step2Disclaimer').scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) {
            alert('checked but not scrolled');
        }
    });
});