Hi,
Does anyone know if there's a way to configure a jquery ui selectable element to unselect the selected element when you click it? Sort of like a toggle. If it's already selected, unselect it, otherwise do the default behavior.
Thanks.
Hi,
Does anyone know if there's a way to configure a jquery ui selectable element to unselect the selected element when you click it? Sort of like a toggle. If it's already selected, unselect it, otherwise do the default behavior.
Thanks.
Is this what you mean?
This event is triggered at the end of the select operation, on each element removed from the selection.
Code examples
Supply a callback function to handle the unselected event as an init option.
$( ".selector" ).selectable({
unselected: function(event, ui) { ... }
});
Bind to the unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
...
});
Source:
Well here's what I just ended up doing. I used a class name to toggle selecting and unselecting. I'd love to hear if there is another option:
$("#selectable").selectable({
selected: function (event, ui) {
if ($(ui.selected).hasClass('selectedfilter')) {
$(ui.selected).removeClass('selectedfilter');
// do unselected stuff
} else {
$(ui.selected).addClass('selectedfilter');
// do selected stuff
}
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('selectedfilter');
}
});