检查 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的复选框被启用，其他是只读的。 在这种情况下，当我单击带有以main-dish开头的 id 的复选框时，它应该使其下方的所有复选框以 id sub-dishes开头。 如果有人选中了main-dish ，那么它也必须选中任何以sub-dishes dishs 开头的 id 复选框。

(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>

Answer 2

通过使用true您仍然禁用复选框，它应该设置为 false

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

Answer 3

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

Answer 4

我认为使用class选择器和包装器的方法更简单。

网址：

<div>
  <label> <input type="checkbox" class="main-dish">Id 9 </label>
  <label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.1 </label>
  <label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.2 </label>
  <label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.3 </label>
</div>
<div>
  <label> <input type="checkbox" class="main-dish">Id 10 </label>
  <label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.1 </label>
  <label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.2 </label>
</div>

JavaScript

$(document).ready(function() {
    $(".main-dish").click(function() {
        var $inp = $(this).parent().parent().find(">label>.sub-dishes-cuisine");

      if ($inp.is("[disabled]")){
         $inp.removeAttr('disabled');
      } else {
         $inp.attr('disabled', true);
      }
    })
});