單擊以選中復選框時避免關閉下拉菜單

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 。