ラボ > Javascript関連:form、イベント関連

jquery リンクやボタンをクリックしたら自身と他のリンクやボタンを無効

formの送信ボタンの連打を防ぐ。

作成日:2018-03-15, 更新日:2018-03-20

基本

form送信だったり、次のページへの遷移に時間がかかるときにボタンなどを連打されることを防ぎたい。

▼希望
・任意の要素クリックで、イベント発火
・クリックさせたくない各要素に対して、CSSを修正。disabledもつけておく。
・ブラウザの「戻る」で戻ってきたときに修正したCSSなどは元に戻しておきたい。

<a href="#" class="btn-onetime">aタグでリンク</a>
<form>
<button class="btn-onetime">buttonタグで送信</button>
</form>

<script>
  window.onunload = function(){}; // firefox対策:コイツがいないとブラウザの「戻る」で戻ってきたらCSSが変更されたまま
  
  var targetElm = '.btn-onetime';
  $(targetElm).each(function(){
   if ( this.tagName.toLowerCase()=='button' && $(this).attr('type') != 'button' ) {
     // 「buttonタグ」で「type=button」じゃなければ「type=button」にする。
     $(this).attr({'type':'button'});
     
     //if ( $(this).attr('onclick') != null ) {
     //  // 「onClick=〇〇〇」を指定していれば後でゴニョゴニョさせるための準備をしておく。
     //  $(this).addClass('historyBack').removeAttr('onclick');
     //  // ※「onClick」を削除して、適当なクラス名を指定。後で、クラス名で条件分岐させて処理追加。
     //}
   }
  });
  
  var acptBtn = true;
  $('body').on('click', targetElm, function(){
    if ( !acptBtn ){
      return false;
    }
    
    var styleDisabled = ({'cursor':'default','opacity':'0.5'}); // マウスカーソルを矢印にして、半透明。
    
    $(targetElm).css(styleDisabled).prop('disabled', true); // 全部一括修正
    //$(this).css(styleDisabled); // 対象のみ修正
    
    var tagName = this.tagName.toLowerCase();
    if ( tagName == 'a' ) {
      // 何もしない
    }
    else if ( tagName == 'button' ) {
      // if (〇〇〇) { // 「history.back()」を絡めているときは、条件指定して「submit()」されないようにする。。
      //   history.back();
      //   return false;
      // }
      
      // $(this).prop('disabled', 'disabled');
      $(this).parents('form').submit();
    }
    
    acptBtn = false;
  });
</script>