jquery UI: how to deselect a selectable element without using Ctrl+click

Question

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 e.metakey = false, but I'm afraid I don't understand the whole point of it, so may be I'm using it the wrong way :S

$('.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);
    }
});

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

Thanks!

HTML:

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

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

Answer 1

I found a solution to my problem. First of all, I should have made my outer('#choices')div selectable in order to allow selecting the inner divs('.option').Second of all e.metakey can solve the Ctrl-problem, but not the way I used it. I probably didn't explain the problem very well, too - sorry about that. So, I'm really grateful to those who posted answers and tried to help me. Thanks a lot! :)

I'm giving you the working copy of my code just in case it's useful for someone...

$("#choices").bind("mousedown", function( e ) {
    e.metaKey = true;
}).selectable({
    filter: "div.option",
    selected:function(event, ui){
        ...
    },
    unselected:function(event, ui){
        ...
    } 
});

Answer 2

It would help to see the HTML you are using, but first there are a few issues. This snippet of code does nothing:

$('.option').bind("mousedown", function (e){
    e.metaKey = false;
});

Well it does is set the e.metaKey, but then it does nothing with it.

In the next bit of code, you could try setting the metaKey flag, but I don't think it would do anything since jQuery UI (I am assuming you are using jQuery UI btw) is only providing this callback function and not expecting any returned values.

$('.option').selectable({
    selecting:function(event, ui){
        event.metaKey = false; // does this really do something?
        $(this).attr('isSelected','True');
    },
    selected: function(event, ui){
        event.metaKey = false; // does this really do something?
        $(this).animate({
            opacity: 0.50,
            backgroundColor: "red"
        }, 500);
    },
    unselecting: function(event, ui){
        event.metaKey = false; // does this really do something?
        if ($(this).attr('isSelected') == 'True'{
            $(this).attr('isSelected','False');
        };
    },
    unselected: function uns(event, ui){ // syntax error
        event.metaKey = false; // does this really do something?
        $(this).animate( {
            opacity:1,
            backgroundColor: 'orange'
        }, 500);
    }
});

So we can't really answer your question until you share some HTML or a demo of your code on jsFiddle would be ideal.