【jQuery】クリックを禁止・無効化する完全ガイド｜disabled・preventDefaultまで

ボタンやリンクのクリックを禁止したい場合、目的によって実装方法が異なります。本記事ではdisabled属性・pointer-events・preventDefault・一時的な無効化・二重送信防止まで解説します。

1. ボタンをdisabledで無効化する

フォームのボタンには disabled プロパティを使うのが最もシンプルです。クリックイベントも発火しなくなります。

// disabled にする
$('#submit-btn').prop('disabled', true);

// 再び有効にする
$('#submit-btn').prop('disabled', false);

// disabled か確認する
var isDisabled = $('#submit-btn').prop('disabled');  // true / false

2. リンクのクリックをキャンセルする（preventDefault）

// aタグのクリックをキャンセル
$('#my-link').on('click', function (e) {
  e.preventDefault();
  // クリックは検知できるが遷移しない
  console.log('クリックされましたがリンク先には遷移しません');
});

// 全てのaタグを一時的に無効化
$('a').on('click', function (e) { e.preventDefault(); });

// クラスを付けた要素だけキャンセル
$('.disabled-link').on('click', function (e) {
  if ($(this).hasClass('is-disabled')) {
    e.preventDefault();
  }
});

3. pointer-events: noneでCSSからクリックを禁止

マウスイベント自体を無効にするCSSプロパティを使う方法です。jQueryでクラスを付け替えるだけで制御できます。

.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

// クリック禁止（pointer-eventsでクリック自体を無効化）
$('#my-btn').addClass('is-disabled');

// 解除
$('#my-btn').removeClass('is-disabled');

4. フォームの二重送信を防止する

送信ボタンをクリックしたら即座にdisabledにして、処理完了後に再び有効にするパターンです。

$('#contact-form').on('submit', function (e) {
  e.preventDefault();
  var $btn = $(this).find('[type="submit"]');

  // 二重送信防止
  $btn.prop('disabled', true).text('送信中...');

  $.ajax({
    url: '/api/contact',
    method: 'POST',
    data: $(this).serialize(),
    success: function () {
      $btn.text('送信しました！');
    },
    error: function () {
      $btn.prop('disabled', false).text('送信する');  // エラー時は再び有効化
    }
  });
});

5. 一定時間だけクリックを無効化する

// クリック後3秒間は再クリック禁止
$('#action-btn').on('click', function () {
  var $btn = $(this);
  if ($btn.data('processing')) return;  // 処理中なら無視

  $btn.data('processing', true);
  $btn.prop('disabled', true);

  // 処理の実行（例: 3秒後に解除）
  setTimeout(function () {
    $btn.data('processing', false);
    $btn.prop('disabled', false);
  }, 3000);
});

まとめ

関連記事: jQueryのフォームバリデーション完全ガイド / jQueryのeach()でループ処理する方法

よくある質問（FAQ）