javascript - 选中 div 之间的复选框

Question

我的表单中有一组复选框。就像下面这样，

<div>
  <label><input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>

加载页面时，仅启用 ID 为 main-dish 的复选框，其他复选框为只读。在这种情况下，当我单击 id 以 main-dish 开头的复选框时，它应该启用其下面以 id sub-dishes 开头的所有复选框。如果有人选中了main-dish，那么它还必须选择任何 ID 以sub-dishes 开头的复选框。

(jQuery)("input[type='checkbox'][id*='main-dish']", context).click(function () {

  (jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);

})

Answer 1

使用nextUntil()选择下一个元素，直到找到带有main-dish选择器的元素，该函数将元素列表作为输入并选择所有元素，直到 id 为 main-dish-* 的标签，从那里我们选择复选框并切换禁用属性

$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
var inputs = $(this).closest('label').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('label')).find('input');
  
  inputs.prop('disabled', !inputs.prop('disabled'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox" id="main-dish-9">Id 9</label>
<label>
  <input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
<label>
  <input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
<label>
  <input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
<label>
  <input type="checkbox" id="main-dish-12">Id 9</label>
<label>
  <input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
<label>
  <input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>

带包装 div 的演示

$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
$("input[type='checkbox'][id*='main-dish']").click(function() {
  var inputs = $(this).closest('.wrap-input').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('.wrap-input')).find('input');

  inputs.prop('disabled', !inputs.prop('disabled'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div class="wrap-input">
  <label>
    <input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>