Enable multi-select on jQuery selectable on click

Question

Is it possible to enable multi-select on jQuery selectable?

By multi-select I mean being able to select more than option by just clicking on it (similar to checkboxes) and if it is clicked on again, it deselects the option.

This is the code I have so far: http://jsfiddle.net/vw9jL/1/

HTML

<ol id="selectable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
    <li class="ui-state-default">13</li>
    <li class="ui-state-default">14</li>
    <li class="ui-state-default">15</li>
</ol>

CSS

#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #C41C7B; }
#selectable .ui-selected { background: #C41C7B; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 3px; float: left; width: 20px; height: 20px; font-size: 14px; font-family: Arial; text-align: center; }

jQuery

 $(function() {
        $( "#selectable" ).selectable();
    });

Many thanks in advance.

score 1 · Accepted Answer · answered Nov 09 '12 at 19:37

1

Bind mouse down:

$(function() {
    $("#selectable").bind('mousedown', function (e) {
        e.metaKey = true;
    }).selectable();
});

jSFiddle Demo

answered Nov 09 '12 at 19:37

Emmanuel N

7,350
2
26
36

Is there a way to have a default number of values selected? For example if I wanted 1 to 10 selected on page load – methuselah Nov 09 '12 at 19:39
Always a good idea to accept answers in case you agree, you can always change your accept option. – Emmanuel N Nov 09 '12 at 19:41
@EmmanuelN Its only going to let me accept in the next two minutes. I was wondering how you have set certain blocks to be selected by default on page load - if that makes sense? – methuselah Nov 09 '12 at 19:43
That make selectable behave as if control key has been hold down – Emmanuel N Nov 09 '12 at 19:45

score 0 · Answer 2 · answered Nov 09 '12 at 19:36

0

Control+Click your buttons in your fiddle ;)

answered Nov 09 '12 at 19:36

Levi Botelho

24,626
5
61
96

Documentation also mentions ability to click and drag for multiple selections. – Coby Nov 09 '12 at 19:39

Enable multi-select on jQuery selectable on click

2 Answers2

Linked