【JQuery】【備忘録】ボタンの活性化・非活性化は意外と簡単にできる

今回は、備忘録としてJQueryを使った、ボタンの活性化・非活性化について書きます。
また、最後にある一定時間だけ非活性にする方法なども載せます。

基本の形

JQueryでの記載は以下になります。

ボタンを非活性にする

$(要素).prop('disabled',true);

ボタンを活性化する

$(要素).prop('disables',false);

例　ボタンをクリックしたら非活性化する

例として、ボタンをクリックした後、非活性化することをやってみます。

html

<button id="hoge">ボタン</button>

JQuery

$(function(){
 $('#hoge').on('click',function(){
  $(this).prop('disables',true);
 });
});

このような流れになります。

おまけ

ボタンをクリック→一定時間(１分間）非活性化→活性化の流れをやってみます。

html

<button id="hoge">ボタン</button>

JQuery

$(function(){
 $('#hoge').on('click',function(){
  $(this).prop('disables',true);
 setTimeout(function () {
      $('#hoge').prop('disabled', false);
    }, 60000);
 });
});

一定時間非活性化から活性化をするには、setTimeoutを使い、一定時間経過したら
ボタンを活性化する処理にしてみました。

参考

https://qiita.com/ponsuke0531/items/ed8dc7991311a9a2a5a7
https://qiita.com/pugiemonn/items/5db6fb8fd8a303406b17
https://mugenweb-note.com/web/jquery/timer-reload