vendredi 16 juin 2017

Selecting only checkboxes within the parent div

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

http://ift.tt/2sBWnqS




Aucun commentaire:

Enregistrer un commentaire