BinaryDevelop
  1. ホーム
  2. jquery

[解決済み】jQuery - チェックボックスの有効化/無効化

2022-04-04 05:17:32

質問

このようなチェックボックスがたくさんあります。チェックボックスがチェックされると、他の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>

解決方法は？

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

$(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やクラスを導入せずに属性セレクタを使って行うこともできますが、速度が遅くなり、（イマイチ）読みづらくなります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します