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
Aucun commentaire:
Enregistrer un commentaire