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>

加载页面时，仅启用标识为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为{的标签为止{1}}，从那里我们选中复选框，然后切换已禁用的属性

＆＃13;

main-dish-*

＆＃13;

$("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'));
})

＆＃13;

包裹div的演示

＆＃13;

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

＆＃13;

$("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'));
})

＆＃13;

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选择器和包装器的简单方法。

HTML：

<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);
      }
    })
});

检查div之间的复选框

4 个答案: