jQueryでチェックボックスの状態を自在に操る！有効/無効切り替えの5つの方法

2024-04-12

jQueryでチェックボックスを有効/無効にする

prop() メソッドを使用して、チェックボックスの disabled プロパティを設定/解除できます。

// チェックボックスを有効にする
$('#checkbox').prop('disabled', false);

// チェックボックスを無効にする
$('#checkbox').prop('disabled', true);

// チェックボックスを有効にする
$('#checkbox').attr('disabled', false);

// チェックボックスを無効にする
$('#checkbox').attr('disabled', true);

addClass() と removeClass() メソッドを使用して、チェックボックスに disabled クラスを追加/削除できます。

// チェックボックスを無効にする
$('#checkbox').addClass('disabled');

// チェックボックスを有効にする
$('#checkbox').removeClass('disabled');

enable() と disable() メソッドを使用して、チェックボックスを直接有効/無効できます。

// チェックボックスを有効にする
$('#checkbox').enable();

// チェックボックスを無効にする
$('#checkbox').disable();

上記の方法に加えて、以下のような方法も使用できます。

checked プロパティを設定/解除する
readonly 属性を設定/解除する
tabIndex 属性を設定する

例

以下は、上記の各方法を使用した例です。

<input type="checkbox" id="checkbox">

// 1. prop() メソッドを使う

$('#checkbox').prop('disabled', false); // チェックボックスを有効にする
$('#checkbox').prop('disabled', true);  // チェックボックスを無効にする

// 2. attr() メソッドを使う

$('#checkbox').attr('disabled', false); // チェックボックスを有効にする
$('#checkbox').attr('disabled', true);  // チェックボックスを無効にする

// 3. addClass() と removeClass() メソッドを使う

$('#checkbox').addClass('disabled');  // チェックボックスを無効にする
$('#checkbox').removeClass('disabled'); // チェックボックスを有効にする

// 4. enable() と disable() メソッドを使う

$('#checkbox').enable(); // チェックボックスを有効にする
$('#checkbox').disable(); // チェックボックスを無効にする

// 5. checked プロパティを設定/解除する

$('#checkbox').prop('checked', true);  // チェックボックスをチェックする
$('#checkbox').prop('checked', false); // チェックボックスのチェックを外す

// 6. readonly 属性を設定/解除する

$('#checkbox').attr('readonly', false); // チェックボックスを編集可能にする
$('#checkbox').attr('readonly', true);  // チェックボックスを編集不可にする

// 7. tabIndex 属性を設定する

$('#checkbox').attr('tabIndex', 0);  // チェックボックスにフォーカスできるようにする
$('#checkbox').attr('tabIndex', -1); // チェックボックスにフォーカスできないようにする

以上、jQueryでチェックボックスを有効/無効にする方法について解説しました。これらの方法を使い分けることで、さまざまな状況に対応することができます。

jQueryでチェックボックスを有効/無効にするサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでチェックボックスを有効/無効にする</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>チェックボックスを有効/無効にする</h1>
  <p>
    <input type="checkbox" id="checkbox1" checked>
    <label for="checkbox1">チェックボックス1</label>
  </p>
  <p>
    <input type="checkbox" id="checkbox2" disabled>
    <label for="checkbox2">チェックボックス2 (無効)</label>
  </p>
  <button id="enable-button">チェックボックス1を有効にする</button>
  <button id="disable-button">チェックボックス1を無効にする</button>

  <script>
    $(document).ready(function() {
      // チェックボックス1を有効にするボタン
      $('#enable-button').click(function() {
        $('#checkbox1').prop('disabled', false);
      });

      // チェックボックス1を無効にするボタン
      $('#disable-button').click(function() {
        $('#checkbox1').prop('disabled', true);
      });
    });
  </script>
</body>
</html>

このコードを実行すると、以下のようになります。

最初は、チェックボックス1は有効でチェックされています。
チェックボックス2は無効で、チェックを外すことはできません。
「チェックボックス1を有効にする」ボタンをクリックすると、チェックボックス1が有効になり、チェックを外すことができるようになります。

上記のサンプルコードは、基本的な例です。さまざまな状況に合わせて、コードをカスタマイズすることができます。

例えば、以下のようなことができます。

複数のチェックボックスを同時に有効/無効にする
チェックボックスの状態に応じて、他の要素を操作する
チェックボックスの状態を保存する

jQueryでチェックボックスを有効/無効にする他の方法

data() メソッドを使用して、チェックボックスの状態を保存できます。

// チェックボックスを有効にする
$('#checkbox').data('disabled', false);

// チェックボックスを無効にする
$('#checkbox').data('disabled', true);

// チェックボックスの状態を取得する
var disabled = $('#checkbox').data('disabled');

// チェックボックスを有効/無効にする
$('#checkbox').toggleClass('disabled');

イベントを使用する

change イベントを使用して、チェックボックスの状態が変更されたときに処理を実行できます。

$('#checkbox').change(function() {
  // チェックボックスが有効か無効かを判断する
  if ($(this).is(':disabled')) {
    // 無効の場合の処理
  } else {
    // 有効の場合の処理
  }
});

<input type="checkbox" id="checkbox" data-disabled="false">

// チェックボックスを有効にする
$('#checkbox').attr('data-disabled', false);

// チェックボックスを無効にする
$('#checkbox').attr('data-disabled', true);

// チェックボックスの状態を取得する
var disabled = $('#checkbox').attr('data-disabled');