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

はじめに

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

 

 

環境

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

jQuery 3.5.1

 

導入

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

 

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

サンプル

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

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-jQuery
-,