jQuery-チェックボックスの有効化/無効化

234

このようなチェックボックスがたくさんあります。[チェックする]チェックボックスがオンになっている場合は、他の3つのチェックボックスをすべて有効にし、それ以外の場合は無効にする必要があります。jQueryを使用してこれを行うにはどうすればよいですか？

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>

jquery

— ジェイク
ソース

413

マークアップを少し変更します。

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("input.group1").attr("disabled", true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
  <input type="checkbox" name="chkcc9" id="group1">Check Me <br>
  <input type="checkbox" name="chk9[120]" class="group1"><br>
  <input type="checkbox" name="chk9[140]" class="group1"><br>
  <input type="checkbox" name="chk9[150]" class="group1"><br>
</form>

スニペットを展開

IDとクラスを導入しなくても、属性セレクターを使用してこれを行うことができますが、速度が遅くなり（読み方が）難しくなります。

— クレタス
ソース

3

無効の部分については、次のURLを試してみてください。jquery-howto.blogspot.com/2008/12/...

— ウォルトStoneburner

3

これは質問とは直接関係ありませんが、IEではチェックボックスがフォーカスを失うまでchangeイベントは発生しません。私は通常$(this).change、最初のチェックボックスのクリックイベントを呼び出します。

— mcrumley 2010

10

の.prop()代わりに使用できます.attr()。

— Reza Owliaei 2012年

5

.prop（）で問題が発生しましたが、最初のセットで機能しましたが、前後に切り替えた場合、2回目にチェックボックスの「無効化」に失敗しました。私はattr（）で立ち往生しました。

— ProVega 2013年

3

@ProVega これはあなたの問題を説明するかもしれません。

— Andrew

100

これは最新のソリューションです。

<form name="frmChkForm" id="frmChkForm">
    <input type="checkbox" name="chkcc9" id="group1" />Check Me
    <input type="checkbox" name="chk9[120]" class="group1" />
    <input type="checkbox" name="chk9[140]" class="group1" />
    <input type="checkbox" name="chk9[150]" class="group1" />
</form>

$(function() {
    enable_cb();
    $("#group1").click(enable_cb);
});

function enable_cb() {
    $("input.group1").prop("disabled", !this.checked);
}

ここでの使用の詳細である.attr()と.prop()。

jQuery 1.6以降

新しい.prop()関数を使用します。

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5以下

この.prop()機能は利用できないため、を使用する必要があります.attr()。

（disabled属性の値を設定して）チェックボックスを無効にするには、次のようにします。

$("input.group1").attr('disabled','disabled');

（属性を完全に削除して）有効にするために、

$("input.group1").removeAttr('disabled');

jQueryの任意のバージョン

要素を1つだけ使用している場合は、常に最も速く使用できますDOMElement.disabled = true。.prop()and .attr()関数を使用する利点は、一致したすべての要素で機能することです。

// Assuming an event handler on a checkbox
if (this.disabled)

参照：jQueryでチェックボックスに「チェック」を設定しますか？

— ロイダッキー
ソース

2

私のようにasp：CheckBoxを使用している場合は、ブラウザー内でスパン内の入力としてレンダリングされます。したがって、私の場合、jQueryで$（ '。checkboxClassName input'）。prop（ 'disabled'、false）...としてアクセスする必要があり、 'enabled'を変更しようとしてもうまくいきませんでした:)ありがとうこの答えのために！

— deebs 2016年

10

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>

$("#chkAll").click(function() {
   $(".chkGroup").attr("checked", this.checked);
});

すべての個別のチェックボックスがオンの場合、すべてのチェックボックスをオン/オフにする機能が追加されました。

$(".chkGroup").click(function() {
  $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

— ジンコープ
ソース

1

JQuery 1.10.2を使用した別のサンプルを次に示します

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});

— パオロ・ゲバラ
ソース

1

$(document).ready(function() {
  $('#InventoryMasterError').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').attr('disabled', 'disabled');
      });
    } else {
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').removeAttr('disabled', 'disabled');
      });
    }
  });

});

$(document).ready(function() {
  $('#selecctall').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').attr('disabled', 'disabled');
      });

    } else {
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').removeAttr('disabled', 'disabled');
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />

スニペットを展開

— Princespn
ソース

0

$jQuery(function() {
  enable_cb();
  jQuery("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    jQuery("input.group1").removeAttr("disabled");
  } else {
    jQuery("input.group1").attr("disabled", true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
  <input type="checkbox" name="chkcc9" id="group1">Check Me <br>
  <input type="checkbox" name="chk9[120]" class="group1"><br>
  <input type="checkbox" name="chk9[140]" class="group1"><br>
  <input type="checkbox" name="chk9[150]" class="group1"><br>
</form>

スニペットを展開

— グヴァンチ・ホヤモフ
ソース