jeudi 20 juillet 2017

Checkbox stays checked when clicking on it in a dropdown

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="">&nbsp;Type</a></li>
   <li><a href="#" class="small" data-value="Release" tabindex="-1"><input type="checkbox" checked="">&nbsp;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