jquery UI: how to deselect a selectable element without using Ctrl+click
<p>I was wondering if I could get some help. (First of all, I want to apologize.. please excuse my bad English...)
I am trying to make a game which gives the player several options from which they could choose. There are always two correct options. I would like to know how I can give the player a chance to select the second (or third) option by mouse clicking (NOT Ctrl+click) and deselect one of the selected options by just clicking on it (again NOT Ctrl+click)
I tried some things that I read about, like <code>e.metakey = false</code>, but I'm afraid I don't understand the whole point of it, so may be I'm using it the wrong way :S </p>

<pre><code>$('.option').bind("mousedown", function (e){
    e.metaKey = false;
});
$('.option').selectable({
    selecting:function(event, ui){
        $(this).attr('isSelected','True');
    },
    selected: function(event, ui){
        $(this).animate({
            opacity: 0.50,
            backgroundColor: "red"
        }, 500);
    },
    unselecting: function(event, ui){
        if ($(this).attr('isSelected') == 'True'{
            $(this).attr('isSelected','False');
        };
    },
    unselected: function(event, ui){
        $(this).animate( {
            opacity:1,
            backgroundColor: 'orange'
        }, 500);
    }
});
</code></pre>

<p>Does anyone know a correct way I can do this?
(I'll be happy if I found a better explanation on <code>e.metaKey</code>)
Any information would be really helpful! :)</p>

<p>Thanks!</p>

<p>HTML:</p>

<pre><code>&lt;div id="choices"&gt;
&lt;div class="option_holder_big option ui-selectable masonry-brick" number="8"&gt;
    &lt;div class="draggable ui-selectee" number="8"&gt;
        &lt;div class="option_square ui-selectee"&gt;...&lt;/div&gt;
        //...
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="option_holder option ui-selectable" number="2"&gt;
    &lt;div class="option_square draggable ui-selectee" number="2"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class="option_holder option ui-selectable" number="3"&gt;
    &lt;div class="option_square draggable ui-selected" number="3"&gt;...&lt;/div&gt;//selected one
&lt;/div&gt;
&lt;div class="option_holder_big option ui-selectable" number="6"&gt;
    &lt;div class="draggable ui-selectee" number="6"&gt;
        &lt;div class="option_square ui-selectee"&gt;...&lt;/div&gt;
        &lt;div class="option_square ui-selectee"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>I'm adding the part of html code after option with number=3 has been selected.(as an example)
Is that what you need, @AndrewPeacock?
PS/I noticed that not the "option" div, but the inner one got the "ui-selected" class - I guess it's normal...</p>
