jQuery Ui Selectable with a list of checkboxes
I'm having an issue with Selectable when applied to a list of checkboxes. I have set up my list as follows:
<ul id="multiSelect">
<li><input type="checkbox" id="c1" /><label for="c1">Label text</label></li>
<li><input type="checkbox" id="c2" /><label for="c2">Label text</label></li>
<li><input type="checkbox" id="c3" /><label for="c3">Label text</label></li>
</ul>
I am calling Selectable() as follows (drag to multi-select, CMD + drag to multi-unselect):
$("#multiSelect").selectable({
distance:5,
delay:100,
selected: function(event, ui) {
$(ui.selected).find("input").each(function() {
$(this).prop("checked", (event.metaKey) ? false : true);
});
}
});
Everything works fine if I drag starting on the label text, but if I start dragging on one of the checkboxes themselves, no multi-selection is made, and I don't get the marquis box. Is there a way to make Selectable() recognize the start of a drag on the checkbox?
Thanks!