Enable multi-select on jQuery selectable on click
<p>Is it possible to enable multi-select on jQuery selectable?</p>

<p>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.</p>

<p>This is the code I have so far: <a href="http://jsfiddle.net/vw9jL/1/" rel="nofollow">http://jsfiddle.net/vw9jL/1/</a></p>

<p><strong>HTML</strong></p>

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

<p><strong>CSS</strong></p>

<pre><code>#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; }​
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code> $(function() {
        $( "#selectable" ).selectable();
    });​
</code></pre>

<p>Many thanks in advance.</p>
