【jQuery】規約を一番下までスクロールするとボタンが押せる

規約を一番下までスクロールするとボタンが押せるようにしたいのですができますかー？

ふむふむなるほど、よく見かけますねー、活性化ですねー、できますよー。

規約を一番下までスクロールするとボタンが押せる、実装

一番下までスクロールすると、ボタンに付いてるdisabledが外れるように設定します。

See the Pen 【jQuery】規約を一番下までスクロールするとボタンが押せる by 125naroom (@125naroom) on CodePen.

HTMLとjQueryはこちら

HTML

<section>
  <div class="scroll_box">
    <p>一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。一番下までスクロールするとボタンが押せる。</p>
  </div>
  <form>
    <div class="btnArea">
      <input type="submit" value="" class="check-btn" disabled>
      <a href="https://125naroom.com/web/4208" target="_blank" class="btn_one">ボタン</a>
    </div>
  </form> 
</section>

jQuery

//規約を一番下までスクロールするとボタンが押せる
$(function(){  
  //disabledを設定しておく
  $('[type="checkbox"], .check-btn').prop('disabled', true);
  //一番下までスクロールするとボタンが押せる（ボタンのdisabledが外れる）
  var scrollend = false;
  $('.scroll_box').scroll(function(event){
    if (
      scrollend == false
      && event.target.clientHeight + event.target.scrollTop >= event.target.scrollHeight
    ) {
      $(".check-btn").prop('disabled', false);
      scrollend = true;
    }
  });
});

規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる、実装

少しアレンジしてみます。
一番下までスクロールすると、まずチェックボタンが活性化するようにしてみました。
そしてチェックボックスにチェックが付いたらボタンが押せるようになります。
再確認ですね。

See the Pen 【jQuery】規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる by 125naroom (@125naroom) on CodePen.

HTMLとjQueryはこちら

HTML

<section>
  <div class="scroll_box">
    <p>一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる。</p>
  </div>
  <form>
    <div>
      <input type="checkbox" id="check1" disabled>
      <label for="check1">ちゃんと読みました。</label>
    </div>
    <div>
      <input type="checkbox" id="check2" disabled>
      <label for="check2">本当にちゃんと読みました。</label>
    </div>
    <div class="btnArea">
      <input type="submit" value="" class="check-btn" disabled>
      <a href="https://125naroom.com/web/4208" target="_blank" class="btn_one">ボタン</a>
    </div>
  </form> 
</section>

jQuery

//規約を一番下までスクロールするとチェックできる、そしてチェックするとボタンが押せる
$(function(){  
  //disabledを設定しておく
  $('[type="checkbox"], .check-btn').prop('disabled', true);
  //一番下までスクロールするとチェックできる（checkboxの＃check1のdisabledが外れる）
  var scrollend = false;
  $('.scroll_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);
  }
  //checkboxの＃check1をチェックすると、checkboxの＃check2がチェックできる
  $("#check1").on({
    "click":function(){
      if(!scrollend) return;
      practicableEvent($(this), $("#check2"));
    },
    "change":function(){
      if(!scrollend) return;
      practicableEvent($(this), $("#check2"));
    }
  });
  //checkboxの＃check2をチェックするとボタンが押せる
  $("#check2").on({
    "click":function(){
      practicableEvent($(this), $(".check-btn"));
    },
    "change":function(){
      practicableEvent($(this), $(".check-btn"));
    }
  }); 
});