Enable button when scroll bootstrap modal to bottom

Question

I want to force the user to read all the agreement inside the modal. The idea is simple, if they don't scroll to the last line of the text. The button still disable. But the button is not enable. This is my code:

Javascript:

$('#agreement').scroll(function () {
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {            
        $('#closeBtn').removeAttr('disabled');
    }
});

As for the clearer picture. I put the code in js here : http://jsfiddle.net/h3WDq/1129/

This is an update version from @BG101. The button enable when I scroll to the bottom but it keeps enable even the modal button is click again. http://jsfiddle.net/h3WDq/1132/

Answer 1

your modal-body need the scroll event, and you need a small change to the if:-

$('.modal-body').scroll(function () {
    if ($('#agreement').height() == ($(this).scrollTop() + $(this).height())) {         
        $('#closeBtn').removeAttr('disabled');
    }
});

working snippet below (updated to toggle on/off)

$('.modal-body').scroll(function() {
  var disable = $('#agreement').height() != ($(this).scrollTop() + $(this).height());
  $('#closeBtn').prop('disabled', disable);
});

.btn-group {
  z-index: 1051;
}
.modal-body {
  height: 300px;
  overflow: auto
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<div class="container">

  <h3>User Agreement</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>User Agreement</h3>
    </div>
    <div class="modal-body">

      <div id="agreement" style="height:1000px;">
        A very long agreement
      </div>

    </div>
    <div class="modal-footer">
      <button id="closeBtn" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" disabled>I Accept</button>
    </div>
  </div>

</div>

Answer 2

#terms-page - is the ID of the particular div

You can try the following:

$("#terms-page").scroll(function () {
    var ele = document.getElementById('terms-page');
    if (ele.scrollHeight - ele.scrollTop === ele.clientHeight)
    {
        $('#closeBtn').removeAttr('disabled');
    }
});