規約を下までスクロールしないとチェックできないチェックボックスの実装：jQuery

2024-10-15 JavaScript

規約を下までスクロールしないとチェックできないチェックボックスを実装する必要がありましたのでメモ。

今回はさらにチェックボックスをチェックしないと送信ボタンが押せないような仕様をjQueryで実装します。

1 HTMLの記述
2 jQueryの記述

HTMLの記述

<div class="kiyaku">

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

</div>
<div class="kiyakubtn" id="kiyakudoui"><label><input type="checkbox" name="checkbox-kiyaku" value="上記内容を全て確認しました" disabled="">上記内容を全て確認しました</label></div>

<input class="form-submit" type="submit" value="送信">

jQueryの記述

jQueryは以下のように記述します。

//規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる
$(window).on('load', function() {
  //disabledを設定しておく
  $('#kiyakudoui [type="checkbox"], .form-submit').prop('disabled', true);
  
  //一番下までスクロールするとチェック可能
  var scrollend = false;
  
  $('.kiyaku').on('scroll touchmove', function(event){
  var $this = $(this);
  if (
    scrollend == false
    && $this[0].scrollTop + $this[0].clientHeight >= $this[0].scrollHeight - 5
  ) {
    $('#kiyakudoui [type="checkbox"]').prop('disabled', false);
    scrollend = true;
  }
  });

  //disabledのイベント解除設定
  var practicableEvent = function(self, target){
    target.prop('disabled', false);
    setTimeout(function(){
      self.prop('disabled', true);
    }, 0);
  }

  //checkboxの＃check2をチェックするとボタンが押せる
  $('#kiyakudoui [type="checkbox"]').on({
    "click touchstart":function(){
      practicableEvent($(this), $(".form-submit"));
    },
    "change":function(){
      practicableEvent($(this), $(".form-submit"));
    }
  }); 
});