Check the checkboxes between divs

Question

I've a set of checkboxes in a form. Like below,

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

When a page loads, only the check boxes with the id main-dish are enabled, others are read-only. In this case when I click on the checkbox with an id starting with main-dish , It should make all the checkboxes below it starting with the id sub-dishes to be enabled. If someone checked the main-dish , then it also must select any checkbox with an id starting with 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

Use nextUntil() which selects the next elements until it finds the one with the selector of main-dish , this function takes as input a list of elements and selects all elements until the label with a id of main-dish-* ,from there we select the checkbox and we toggle the disabled property

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

Demo with wrapped 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

I think simplier way to use class selectors and wrapper.

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