Vermeiden Sie Drop-Down zu schließen, wenn ein Kontrollkästchen aktiviert

Question

Ich verwende den folgenden Code zum Klicken auf eine Spalte in einer Tabelle zu verbergen oder zeigen, wenn der Benutzer, klicken Sie auf ein Kontrollkästchen in einem Drop-Down-:

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> 

wenn ich selbst auf das Kontrollkästchen klicken, bleibt die Dropdown geöffnet, aber wenn ich auf dem Etikett klicken, wird der Drop-Down geschlossen. In diesem Fall würde ich das Dropdown öffnen lassen. Wie kann ich das machen ?

Answer 1

Wie von Kaddath in den Kommentaren event.stopPropagation auf dem Etikett vorgeschlagen, sollte klicken Sie auf Ereignis sprudeln und damit das Dropdown sollte nicht zusammenbrechen.

Beispielcode:

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

Siehe JSFiddle here.