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

はじめに

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

環境

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

jQuery

3.5.1

導入

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

step
1JavaScript

$(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
2HTML

<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
3CSS

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

サンプル

See the Pen 【jQuery】スクロールでdisabledを解除するイベントの実装方法 by カバの樹 (@kabanoki) on CodePen.dark

専用ページはこちら

解説

規約を一番下までスクロールするとチェックができるようにします。
スクロールが最後まで行ったら、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

にすると、Android Chromeで動作しません。

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