利用規約を最後まで読んだ(スクロールした)されたときに同意するのチェックボックスを押せるページを作りたい。

Question

前提・実現したいこと

利用規約の文章を最後まで読んだ（スクロールした）後に「同意する」のチェックボックスがアクティブになるようにしたい。

下記のサイトを参考にしました。
参考にしたサイト

発生している問題・エラーメッセージ

「同意する」のチェックボックスはアクティブにならないためチェックできないが、「次に進む」はアクティブになっていて、「同意する」のチェックボックスにチェックをつけなくても、次のページに行けてしまいます。

現在、cssは別のファイルを作っていて、JavaScriptはHTMLに直接書いていて、JavaScriptは</head>の真上に入れています。

該当のソースコード

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;
}

<h1>利用規約</h1>
<p class="desc">
  以下の内容をご確認の上、ご同意いただける場合「同意する」にチェックをして、「次へ進む」をクリックしてください。
</p>
<div class="terms">
  <strong>第1条 総則</strong><br>
  <!-- 中略 -->
  <div id="end"></div>
</div>
<p><label><input type="checkbox" id="agree" disabled>同意して次に進む</label></p>
<button id="next" disabled><a href="https://">次へ進む</a></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);

試したこと

参考サイトにコピー＆貼付で初心者でも簡単にできると書かれているので、サンプルと違うところがないか見比べました。
参考サイトのサンプル

JavaScriptをHTMLの真下に配置したところ、文章を下までスクロールしたらチェックボックスがアクティブになりました。

でも、「次へ進む」のボタンがチェックボックスにチェックが付かなくても押せてしまう現象が続いています。

<a href="https://">次へ進む</a>を一度外してみたところ、スクロールする前は「次へ進む」は選択できず、スクロールして「同意して次に進む」のチェックボックスにチェックすると同時に「次へ進む」のボタンがアクティブになりました。

「次へ進む」のリンクを貼った場所が悪いのだと解りましたが、どこへリンクを貼れば良いのかが判りませんでした。

Answer 1

今のコードの場合buttonをdisabledしても中のaタグが押せてしまうので、そこにもpreventDefault()等をしなければいけません。
それかaタグ自体を削除する場合は、JS側でbuttonにクリックイベントを設定してlocation.hrefすれば良いと思います。

next.addEventListener('click', () => {
  location.href = 任意のリンク
})

Comments

[wally]

taku-hu様

アドバイスありがとうございました。JavaScriptの変更でもできるのですね。
勉強になりました。ありがとうございます。

Answer 2

<button id="next" disabled><a href="https://">次へ進む</a></button>
の部分を
<a href="https://"><button id="next" disabled>次へ進む</a></button></a>

にしたところチェックボックスを入れると同時にボタンがアクティブになるようにできました。

ありがとうございました。

Answer 3

<button id="next" disabled><a href="https://">次へ進む</a></button>
の部分を
<a href="https://"><button id="next" disabled>次へ進む</a></button></a>

にしたところチェックボックスを入れると同時にボタンがアクティブになるようにできました。

ありがとうございました。