单击选中复选框时，避免关闭下拉列表

Question

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

JS

$('#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>

当我单击复选框本身时，下拉列表保持打开状态，但是当我单击标签时，下拉列表将关闭。在这种情况下，我会打开下拉列表。我怎么能这样做？

Answer 1

正如Kaddath在标签event.stopPropagation中对标签的建议，点击应该停止事件冒泡，因此下拉列表不应该崩溃。

示例代码：

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

参考JSFiddle here。