Programmatically 'unselect' a jQuery UI selectable widget

Question

Is there a way to programmatically 'unselect' any and all selected elements for a given $("#selectable").selectable() widget?

Thurible

Answer 1

The following command works at http://jqueryui.com/demos/selectable/

$('#selectable .ui-selected').removeClass('ui-selected')

Since a class's existence defines if an item is selected, simply removing the item will deselect it.

Note, you can also take advantage of toggleClass and addClass functions.

EDIT:

Try this too: $('#selectable').trigger('unselected'). That might also trigger all the css changes as well, and this way the unselected event also gets triggered for whatever else may be hooked to it.

Mountfort

by this way, seem it does not raise "unselected" event :( – Riggall

I think the proper way with latest jquery-ui is, $('#selectable').data("ui-selectable")._mouseStop(null); – Yogurt

Answer 2

The accepted answer only unselects visually. It doesn't trigger the unselected callback.

This can be used instead:

$(".ui-selected").each(function(i,e){
  $(".selector").selectable("triggerunselect",e);
});

Perrins

Answer 3

You could destroy and reinit the current "selectable" instance.

For instance like this:

$("#selectable-area").selectable("destroy");

then

$("#selectable-area").selectable();

Dispensatory