【jQuery】スクロールでdisabledを解除するイベントの実装方法

はじめに

クライアントから規約を読んでからでないとチェックできない機能を実装して欲しいと依頼がありました。
意外と需要があるらしいので、備忘録として残しておきます。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

導入

今回のサンプルは、規約を一番下までスクロールするとチェックができるようになります。
またチェックをした後に、チェックを外せないようにします。
全てのチェックするとボタンが押せるようになります。

step.1 JavaScript

$(function(){ 
  //初回アクセス時にcheckedを外す
  $('[type="checkbox"]').prop('checked', false);
  //初回アクセス時にdisabledを設定
  $('[type="checkbox"], .checkc').prop('disabled', true);
  //スクロールイベント
  var scrollend = false;
  $('.frame_box').scroll(function(event){
    if (
      scrollend == false
      && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight
    ) {
      $("#check1").prop('disabled', false);
      scrollend = true;
    }
  });

  //disabledのイベント解除
  var practicableEvent = function(self, target){
    target.prop('disabled', false);
    setTimeout(function(){
      self.prop('disabled', true);
    }, 0);
  }
  //checkbox1をクリックしたとき
  $("#check1").on({
    "click":function(){
      if(!scrollend) return;

      practicableEvent($(this), $("#check2"));
    },
    "change":function(){
      if(!scrollend) return;

      practicableEvent($(this), $("#check2"));
    }
  });
  //checkbox2をクリックしたとき
  $("#check2").on({
    "click":function(){
      practicableEvent($(this), $(".checkc"));
    },
    "change":function(){
      practicableEvent($(this), $(".checkc"));
    }
  }); 
});

step.2 HTML

<div class="frame_box">
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
<div>
  <input type="checkbox" id="check1" disabled>
  <input type="checkbox" id="check2" disabled>
  <button class="checkc" disabled>button</button>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

step.3 CSS

.frame_box {
  width:250px;
  height: 100px;
  overflow:auto;
  border:1px solid #000;
}

サンプル

解説

規約を一番下までスクロールするとチェックができるようにします。
スクロールが最後まで行ったら、scrollend に true を設定します。
この値をもたせることで、スクロールして戻してを繰り返すことで、チェックボックスのdisabledを再度解除することを防ぎます。

var scrollend = false;
$('.frame_box').scroll(function(event){
  if (
    scrollend == false
    && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight
  ) {
    $("#check1").prop('disabled', false);
    scrollend = true;
  }
});

event.target.clientHeight + event.target.scrollTop == event.target.scrollHeight

event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight

チェックボックスのチェックを入れると、次のチェックボックスのdisabledが解除されます。
さいごのチェックボック解除されると、ボタンをクリックできるようになります。

チェックボックスのクリック時(click)と値を変更した時（change）の2つのイベントを設定します。
FireFoxだとチェックボックスのchangeが動作しないので、clickとchengeの両方を設定します。

//disabledのイベント解除
var practicableEvent = function(self, target){
  target.prop('disabled', false);
  setTimeout(function(){
    self.prop('disabled', true);
  }, 0);
}
//checkbox1をクリックしたとき
$("#check1").on({
  "click":function(){
    if(!scrollend) return;

    practicableEvent($(this), $("#check2"));
  },
  "change":function(){
    if(!scrollend) return;

    practicableEvent($(this), $("#check2"));
  }
});
//checkbox2をクリックしたとき
$("#check2").on({
  "click":function(){
    practicableEvent($(this), $(".checkc"));
  },
  "change":function(){
    practicableEvent($(this), $(".checkc"));
  }
});