Selecting only checkboxes within the parent div

Question

I am attempting to apply some jQuery to checkboxes but only within the nearest div.

I have a list of x dynamically created checkboxes - if all the checkboxes are blank then I want them all to show as checked.

HTML

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

$(document).ready(function () {
  if ($('.limitall:checkbox:checked').length == 0){
    $('.limitall').prop('checked', true);
  }
  $(".limitall").change(function(){
    if ($('.limitall:checkbox:checked').length == 0){
      $('.limitall').prop('checked', true);
    }
  });
});

This works fine as long as there is only one "set" of items with a class of limitall on the page - if there is more then this treats both groups as one set and this only works if all 10 are blank.

So if I have:

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

<div class="col-lg-6">
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="3">3</label>
</div>

this treats this as a set of 6 rather than 2 sets of 3 - how can I ensure that this doesn't happen and that each set is treated independently?

The above HTML structure will always apply so the checkboxes are always inside a label which is inside a div with a class of col-lg-6 but the name of the input is dynamically set so I cannot use that

https://jsfiddle.net/3dgo3Laz/2/

Answer 1

$(document).ready(function () {
  checkedBox($(".col-lg-6.Active"))
  $(".col-lg-6.Active  input:checkbox").on("change", function () {
    checkedBox($(this).parent().parent());
    });
});

function checkedBox(Element) {
  $.each(Element, function (index, value) {
  var hasCheked = false;
  if ($(value).find('input:checkbox').is(":checked"))
      hasCheked = true;
  if (!hasCheked)
     $(value).find(' input:checkbox').prop('checked', true);
   });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-lg-6 Active">
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
    </div>
    <div class="col-lg-6">
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" checked class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions2[]"  class="perm limitall" value="3">3</label>
    </div>
    <div class="col-lg-6 Active">
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" class="perm limitall" value="1">1</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" class="perm limitall" value="2">2</label>
        <label class="checkbox-inline"><input type="checkbox" name="permissions3[]" checked class="perm limitall" value="3">3</label>
    </div>

Answer 2

You can iterate over all .col-lg-6 elements and set a unique id. You also would move your event handling logic inside a generic function.

$(".col-lg-6").each(function(idx) {
    var id = 'someidentifier' + idx
    $(this).attr('id', id);
    handleEvents(id);
});

var handleEvents = function(id) {

   $('#' + id + ' .limitall').change(function(){
      /*your logic*/
    }); 
}

Answer 3

You could give your divs and id or a special class and target the checkboxes within that div. For example:

<div class="col-lg-6" id="checkboxes-1">
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions[]" class="perm limitall" value="3">3</label>
</div>

<div class="col-lg-6" id="checkboxes-2">
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="1">1</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="2">2</label>
    <label class="checkbox-inline"><input type="checkbox" name="permissions2[]" class="perm2 limitall" value="3">3</label>
</div>

That way, you can change your selector to:

$(document).ready(function () {
  if ($('#checkboxes-1 .limitall:checkbox:checked').length == 0){
    $('#checkboxes-1 .limitall').prop('checked', true);
  }
  $("#checkboxes-1 .limitall").change(function(){
    if ($('#checkboxes-1 .limitall:checkbox:checked').length == 0){
      $('#checkboxes-1 .limitall').prop('checked', true);
    }
  });
});