Disable scroll when checkbox is clicked

Question

<label>
 <input type="checkbox">
</label>

I have no experience with jQuery or Javascript but I would like to know if it is possible to disable sroll on a whole page when a checkbox is ticked and enable it again when it is unticked, I would love a code example

score 1 · Answer 1 · answered Nov 10 '17 at 23:25

Yes, you can do this.

$('#test').change(function() {
  if ($('#test').is(":checked")) {
    $('body').css('overflow','hidden');
  } else {
    $('body').css('overflow','auto');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
 <input id="test" type="checkbox">
</label>

Disable scroll when checkbox is clicked

1 Answers1