单击以选中复选框时避免关闭下拉菜单答案

【问题标题】：Avoid closing dropdown when clicking to checked a checkbox单击以选中复选框时避免关闭下拉菜单
【发布时间】：2017-12-25 20:54:00
【问题描述】：

当用户单击下拉列表中的复选框时，我使用以下代码隐藏或显示表中的列：

$('#columnsListDropDown :checkbox').on('change', function() {
      $("#myTable").find("[data-column='" + this.value + "']").toggle(this.checked);
      return false;
});

HTML

<ul class="dropdown-menu columnsFilterDropDownMenu" id="columnsListDropDown">
    <li>
        <label class="small" data-value="Type">
            <input type="checkbox" value="Type" checked="true">Type</label>
    </li>
    <li>
        <label class="small" data-value="Release">
            <input type="checkbox" value="Release" checked="true">Release</label>
    </li>
</ul>

当我点击复选框本身时，下拉菜单保持打开状态，但当我点击标签时，下拉菜单关闭。在这种情况下，我会让下拉菜单打开。我该怎么做？

【问题讨论】：

请包含所有相关代码，如css等
this.value 和 this.checked 是否正确？
@ElmerDantas 是的，因为单击复选框时代码可以正常工作
点击标签时onchange函数会触发吗（可以在里面添加console.log查看）？如果没有，您可以添加类似$('#columnsListDropDown :label').on('click', function() { /* add code to get the checkbox linked to this label */.trigger('change'); }
@Kaddath 是的，我放了一个断点来检查，当点击标签时我很好地进入了函数

标签： javascript jquery twitter-bootstrap drop-down-menu

【解决方案1】：

正如 Kaddath 在 cmets event.stopPropagation 中所建议的那样，标签点击应该停止事件冒泡，因此下拉菜单不应该折叠。

示例代码：

$('#columnsListDropDown li label').click(function(e){
    e.stopPropagation();
})

请参考JSFiddle here。

【讨论】：