Javascript クリックして数秒間ボタンを押せなく（disabledに）する方法

みなさんこんにちは、ゆうやです！

サイバーエージェントが10年間運営してきたコミュニティサービスの「アメーバピグ」（PC版）を12月2日22時を持って終了させた今日このごろ、いかがお過ごしでしょうか。

参考「私の青春」「ありがとう」――PC版「アメーバピグ」10年の歴史に幕、ネットで別れを惜しむ声ITmedia NEWS

さて本記事では、Javascript・jQueryでsetInterval、clearInterval、prop、removeClassなどを使って指定秒数間、対象のボタンを押せなくする方法を紹介します！

数秒間ボタンを押せなく（disabledに）する方法
まとめ

数秒間ボタンを押せなく（disabledに）する方法

完成イメージの確認

今回の完成イメージ

仕様はこんな感じです！

いいねボタン、送信ボタンの２つ
いいねボタンはクリックすると「３秒間透明度を少し下げて押せなくする。」
送信ボタンはクリックすると「すぐ下に”押してくれてありがとう！”の文字を表示。3秒間押せなくする。」

挙動はこちらのデモページよりご確認くださいませ！

デモページ

HTML構造

今回使用するHTMLはこちら！

index.html

<!-- いいねボタン -->
<div class="Disable-Inner-List-Item-LikesIcon">
  <i class="fas fa-heart Disable-Inner-List-Item-LikesIcon-fa-heart"></i>
</div>
<!-- 送信ボタン -->
<button type="button" class="Disable-Inner-List-Item-Btn">送信</button>
<div class="Disable-Inner-List-Item-Text"></div>

CSS

最低限見栄え整えるためのスタイリングをしましょう！

index.css

.Disable-Inner-List-Item-LikesIcon.isDisable {
  opacity: 0.7; /*透明度を下げる*/
  pointer-events: none; /*クリック無効にする*/
}
.Disable-Inner-List-Item-LikesIcon-fa-heart {
  color: #e2264d; /*赤色*/
  font-size: 50px;
}
.Disable-Inner-List-Item-Btn {
  border: 1px solid #e2264d;
  border-radius: 6px;
  width: 120px;
  height: 40px;
  font-size: 20px;
}
.Disable-Inner-List-Item-Text-Text {
  margin-top: 20px;
  width: 100%;
  color: #e2264d;
  font-size: 20px;
}

・「opacity」をデフォルト値の1より低く指定することで要素を薄くしています！

・「pointer-events」をnoneに指定することでクリックを無効化します！

Javascript

1つずつ紹介します。

■いいねボタンをdisabled

ボタンクリックでisDisableクラスを付与
３秒後にisDisableクラスをremoveClassメソッド使用で削除

index.js

$(".Disable-Inner-List-Item-LikesIcon").on('click', function(){

    $btn = $(this);

    //（１）押せなくする
    function LikesBtnDisable(){
      $btn.addClass("isDisable");
      clearInterval(statusDis);
    }
    //（２）押せるようにする
    function LikesBtnAble(){
      $btn.removeClass("isDisable");
      clearInterval(statusAble);
    }
    function LikesBtnClicked(){
      statusDis  = setInterval(LikesBtnDisable , 1); //ボタンを押した直後に（１）を呼び出し
      statusAble = setInterval(LikesBtnAble , 3000); //ボタンを押して３秒後に（２）を呼び出し
    }
    LikesBtnClicked();
  });

■送信ボタンをdisabled

ボタンクリックでDisable-Inner-List-Item-Text-Textクラスのついたdivをボタンの次の要素の中に追加（nextメソッド、appendメソッド）
ボタンクリックでpropメソッド使用でdisabledをtrueに
３秒後に再びpropメソッドでdisabledをfalseに

index.js

$(".Disable-Inner-List-Item-Btn").on('click', function(){

    $btn = $(this);

    $btn.next().append('<div class="Disable-Inner-List-Item-Text-Text">押してくれてありがとう！</div>');

    // （１）押せなくする
    function SubmitBtnDisable(){
      $btn.prop("disabled", true);
      clearInterval(statusDis);
    }
    //（２）押せるようにする
    function SubmitBtnAble(){
      $btn.prop("disabled", false);
      clearInterval(statusAble);
    }
    function SubmitBtnClicked(){
      statusDis  = setInterval(SubmitBtnDisable , 1); //ボタンを押した直後に（１）を呼び出し
      statusAble = setInterval(SubmitBtnAble , 3000); //ボタンを押して３秒後に（２）を呼び出し
    }
    SubmitBtnClicked();
  });

全体的なコード

今回の完成イメージ

添付画像を再現するには以下のコードをお使い下さい！

index.html

<div class="Disable">
        <div class="Disable-Inner">
          <div class="Disable-Inner-Headline">数秒間ボタンを無効にする</div>
          <div class="Disable-Inner-List">
            <!-- いいねボタン -->
            <div class="Disable-Inner-List-Item">
              <div class="Disable-Inner-List-Item-Title">いいねボタン</div>
              <div class="Disable-Inner-List-Item-LikesIcon">
                <i class="fas fa-heart Disable-Inner-List-Item-LikesIcon-fa-heart"></i>
              </div>
            </div>
            <!-- 送信ボタン -->
            <div class="Disable-Inner-List-Item">
              <div class="Disable-Inner-List-Item-Title">送信ボタン</div>
              <button type="button" class="Disable-Inner-List-Item-Btn">送信</button>
              <div class="Disable-Inner-List-Item-Text"></div>
            </div>
          </div>
        </div>
 </div>

index.css

.Disable {
  margin-top: 20px;
}
.Disable-Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1080px;
}
.Disable-Inner-Headline {
  font-weight: bold;
  font-size: 32px;
}
.Disable-Inner-List-Item:first-child {
  padding-top: 0px;
}
.Disable-Inner-List-Item-Title {
  display: flex;
  align-items: center;
  width: 100%;
}
.Disable-Inner-List-Item-LikesIcon.isDisable {
  opacity: 0.7; /*透明度を下げる*/
  pointer-events: none; /*クリック無効にする*/
}
.Disable-Inner-List-Item-LikesIcon-fa-heart {
  color: #e2264d; /*赤色*/
  font-size: 50px;
}
.Disable-Inner-List-Item-Btn {
  border: 1px solid #e2264d;
  border-radius: 6px;
  width: 120px;
  height: 40px;
  font-size: 20px;
}
.Disable-Inner-List-Item-Text-Text {
  margin-top: 20px;
  width: 100%;
  color: #e2264d;
  font-size: 20px;
}

index.js

$(function(){

  $(".Disable-Inner-List-Item-LikesIcon").on('click', function(){

    $btn = $(this);

    //（１）押せなくする
    function LikesBtnDisable(){
      $btn.addClass("isDisable");
      clearInterval(statusDis);
    }
    //（２）押せるようにする
    function LikesBtnAble(){
      $btn.removeClass("isDisable");
      clearInterval(statusAble);
    }
    function LikesBtnClicked(){
      statusDis  = setInterval(LikesBtnDisable , 1); //ボタンを押した直後に（１）を呼び出し
      statusAble = setInterval(LikesBtnAble , 3000); //ボタンを押して３秒後に（２）を呼び出し
    }
    LikesBtnClicked();
  });

  $(".Disable-Inner-List-Item-Btn").on('click', function(){

    $btn = $(this);

    $btn.next().append('<div class="Disable-Inner-List-Item-Text-Text">押してくれてありがとう！</div>');

    // （１）押せなくする
    function SubmitBtnDisable(){
      $btn.prop("disabled", true);
      clearInterval(statusDis);
    }
    //（２）押せるようにする
    function SubmitBtnAble(){
      $btn.prop("disabled", false);
      clearInterval(statusAble);
    }
    function SubmitBtnClicked(){
      statusDis  = setInterval(SubmitBtnDisable , 1); //ボタンを押した直後に（１）を呼び出し
      statusAble = setInterval(SubmitBtnAble , 3000); //ボタンを押して３秒後に（２）を呼び出し
    }
    SubmitBtnClicked();
  });
});

参考記事

一度押したボタンを一定時間使えなくするスクリプト – hibomaの日記

まとめ

いかがでしたでしょうか。

もっとスマートで美しい書き方があるかもしれないのでご存知の方いらっしゃいましたらぜひご教示願いたいです(^o^)

最後までご高覧いただきありがとうございました！