title: jquery ui selectable checkbox
body: <p>I have two questions. I am using jquery selectable ui for a checkbox. </p>
  
  <p><a href="http://jsfiddle.net/skeR4/4/" rel="nofollow">http://jsfiddle.net/skeR4/4/</a></p>
  
  <p>1.) How can i change the script, so on click of a different <code>&lt;li&gt;</code> it also highlights that element, instead of deselecting what was previously highlighted. and to deselect an element the user reclicks the element. this way the user can select multiple elements by clicking each one individually without having to ctrl+click to select multiple.</p>
  
  <pre><code>&lt;div class="demo"&gt;
  
  &lt;ol id="selectable"&gt;
    &lt;li class="ui-state-default"&gt;1&lt;input type="checkbox" value="something"&gt;&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;/ol&gt;
  
  &lt;/div&gt;​
  
  &lt;script&gt;
      $(function() {
          $( "#selectable" ).selectable();
      });
  &lt;/script&gt;​
  </code></pre>