I'm using JQuery UI - Selectable. I want to deselect the element if it has been pressed and it has already been selected (toggle)

Could you help me to add this functionality please !

I'm using JQuery UI - Selectable. I want to deselect the element if it has been pressed and it has already been selected (toggle)

Could you help me to add this functionality please !

• javascript
• jquery
• jquery-ui
• jquery-ui-selectable

• 2 Did one of these answers help you out? – two7s_clash Commented Aug 26, 2011 at 19:48
• 1 Here's a method that works great - it make the default be as if the ctl key was pressed: stackoverflow.com/a/12592042/1017650 – Symmetric Commented Jul 31, 2014 at 21:27

3 Answers 3

Because of all the class callbacks, you're not going to do much better than this:

$(function () {
        $("#selectable").selectable({
            selected: function (event, ui) {
                if ($(ui.selected).hasClass('click-selected')) {
                    $(ui.selected).removeClass('ui-selected click-selected');

                } else {
                    $(ui.selected).addClass('click-selected');

                }
            },
            unselected: function (event, ui) {
                $(ui.unselected).removeClass('click-selected');
            }
        });
    });

You already have that functionality with jQuery UI selectable if you're holding down the Ctrl key while clicking.

If you really need that as the default functionality, you don't need to use selectable, you can do it just as a simple onclick handler, like what nolabel suggested.

Or... you might as well edit jquery.ui.selectable.js and add an option which does just what you need. Shouldn't be too hard, there are 4 places where event.metaKey is checked, make sure if your option is set, just run the codepaths as if event.metaKey was always true.

As the selectables could use some more customisation, you could also make a feature request for jQuery UI developers to include it in the next official version.

You have to inject two simple elements in the code to achieve what you want. This just inverts the metaKey boolean, whenever you need inverted/toggle functionality.

options: {
    appendTo: 'body',
    autoRefresh: true,
    distance: 0,
    filter: '*',
    tolerance: 'touch',
    inverted: false /* <= FIRST*/
},

_mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
        return;

    var options = this.options;

    if (options.inverted) /* <= SECOND*/
        event.metaKey = !event.metaKey; /* <= SECOND*/