I've wrote this jQuery snippet to handle tr click, to add a bootstrap class to it and click the first checkbox in it.
$('body').on('change', '.select-all-children', function(e) {
var checked = this.checked;
$('.select-child').each(function() {
$(this).prop('checked', checked);
if(checked) {
$(this).parent().parent().addClass('warning');
} else {
$(this).parent().parent().removeClass('warning');
}
});
});
$('body').on('click', '.table-selectable tbody tr', function(e) {
var checkbox = $(this).find('.select-child');
checkbox.click();
var checked = checkbox[0].checked;
if(checked) {
$(this).addClass('warning');
} else {
$(this).removeClass('warning');
}
});
$('body').on('change', '.select-child', function(e) {
var checked_total = $('.select-child:checked').length;
if(checked_total == $('.select-child').length) {
$('.select-all-children').prop('checked', true);
} else {
$('.select-all-children').prop('checked', false);
}
});
Whenever I click on the tr and thus trigger this call:
checkbox.click();
I cannot click on the checkbox no more, but the tr click works fine.
This is my HTML markup of the table:
<table class="table table-selectable">
<thead>
<tr>
<th>
<input type="checkbox" class="select-all-children">
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>
<input type="checkbox" class="select-child">
</td>
</tr>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire