I have a dropdown list containing checkeboxes :
<ul class="dropdown-menu columnsFilterDropDownMenu" id="columnsListDropDown">
<li><a href="#" class="small" data-value="Type" tabindex="-1"><input type="checkbox" checked=""> Type</a></li>
<li><a href="#" class="small" data-value="Release" tabindex="-1"><input type="checkbox" checked=""> Release</a></li>
</ul>
When i click on an entry in my dropdown, I wants to hide the dedicated columns into a table. I works fine when i clicked on the label, but when i click on the checkbox, the checkbox stays in the same state.
$('#columnsListDropDown a').on('click', function( event ) {
var input = $(this).find("input");
var columnName = $.trim($(this).text());
if (event.target.localName === "input") {
// Case where user has clicked on the input
if ($(input).is(':checked')) {
$("#myTable").find("[data-column='"+columnName+"']").show()
} else {
$("#myTable").find("[data-column='"+columnName+"']").hide()
}
} else {
// Case where the user has clicked on the label, or in li element
if ($(input).is(':checked')) {
$("#myTable").find("[data-column='"+columnName+"']").hide()
$(input).prop('checked', false);
} else {
$("#myTable").find("[data-column='"+columnName+"']").show()
$(input).prop('checked', true);
}
}
return false;
});
Aucun commentaire:
Enregistrer un commentaire