Home>

I want the "I agree" checkbox to become active after reading (scrolling) the terms of use to the end.

I referred to the following site.
Referenced sites

Error message

The "I agree" checkbox is not active and cannot be checked, but "Next" is active, so you can go to the next page without checking the "I agree" checkbox. I can go.

Currently, css is creating a separate file, JavaScript is written directly in HTML, and JavaScript is placed directly above.

Applicable source code
h1 {
  margin: 0;
}
.desc {
  font-size: 12px;
}
.terms {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  padding: 0.5em;
  overflow-y: scroll;
  box-sizing: border-box;
  border: 1px solid #ccc;
  font-size: 12px;
}
Terms of service 
<p>
  After confirming the following contents, if you agree, check "I agree" and click "Next".
</p>

  <strong>Article 1 General Rules</strong><br>
  <!-Omitted->
   

<p><label><input type = "checkbox" disabled>Agree and continue</label></p>
<button disabled>Next</button>
<script src = "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
var end = document.getElementById ('end');
var agree = document.getElementById ('agree');
var next = document.getElementById ('next');
agree.addEventListener ('click', function () {
  next.disabled =! next.disabled;
});
var observer = new IntersectionObserver (function (changes) {
  if (changes [0] .intersectionRatio === 1) {
    observer.disconnect ();
    agree.disabled = false;
  }
});
observer.observe (end);

Because it is written on the reference site that even beginners can easily do it by copying and pasting, we compared whether there is anything different from the sample.
Reference site sample

When JavaScript was placed directly under HTML, the checkbox became active when the text was scrolled down.

Even with

, the phenomenon that the "Next" button can be pressed even if the check box is not checked continues.

When I removed Next , I could n’t select "Next" before scrolling. The "Next" button became active as soon as the "Next" checkbox was checked.

I understand that the place where I put the "Next" link is bad, but I didn't know where to put the link.

  • Answer # 1


    Part of

    When

    is selected, the button becomes active as soon as the check box is checked.

    Thank you very much.

Related articles