Disable/Enable button conditionally based on scrol

I need to activate a checkbox once a user has scrolled to the bottom of a terms and conditions section of a form. The will be a section in part of a checkout page for ecommerce site.

I have seen arguments on here about this, but per our lawyers, it has to be this way on our site for liability reasons. An accept button at the end of the scroll box would be the last resort, as it seems to confuse some of our users who think it is not there at all no matter how much info we give them about where the button is.

I sourced this code and manipulated it to try and get it to do what I wanted. My code is listed below. It doesn't work. I have successfully disabled the button, however I cannot seem to reactivate it.

I am pretty new to javascript and any help would be greatly appreciated.

   <head>
    <title>Scroll Test</title>
    <script language="JavaScript">
    </script>
</head>

<body>

<form name="form22" action="javascript: alert('Form submitted!');" onSubmit="return formValidation(this);">

    <p>
    License Agreement:<br />
    <textarea name="licenseAgreement" rows="10" cols="45">This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

</textarea>
    </p>

    <p>
    <input name="button" type="checkbox" value="Submit" disabled> I agree
    </p>

</form>

</body>
</html>

Using normal JS it adds a few things we need to check. Consider the following:

Get the LicenseAgreementElement:

var textElement = document.getElementsByName("licenseAgreement")[0]

Now that we have the element,

Get how much the licenseAgreement textarea scrolls to.

textElement.scrollHeight

We need to check if the user has scrolled the entire AgreementElement ie. The scrollTop + height of the actual element.

textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight

Attaching and event listener at the start provides us with the following:

document.getElementsByName("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
    var textElement = document.getElementsByName("licenseAgreement")[0] 
    if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
        document.getElementsByName("button")[0].disabled = false;
    }
}

Enabling the checkbox when the condition is met.

Finally a small time example : JSFiddle