Is there a way to get this jquery grid selection object to default to multi-select?

http://jqueryui.com/demos/selectable/#display-grid

Im using the Jquery Selectable (link above) but the user has to hold the control button down to select multiple items... Is the开发者_如何学Gore anyway that user can select multiple items without holding control button down ?

in other words: I want the user to be able to Select any item by clicking on it and Unselect it by Clicking again.

Any thoughts?

You can set metaKey on mousedown to simulate Ctrl to be pressed:

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

See this DEMO.

From the example on the link, you can modify the script to change elements as toggles

<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
    $('#selectable li').bind('mouseup', function(e) {
        $(e.target).removeClass('ui-selecting');
        var selected = $(e.target).attr('data-selected');
        if (selected) {
            $(e.target).attr('data-selected', null);
        } else {
            $(e.target).addClass('ui-selected');
            $(e.target).attr('data-selected', true);
        }
    });
    $('#selectable li').bind('mousedown', function(e) {
        $(e.target).removeClass('ui-selected');
        $(e.target).addClass('ui-selecting');
    });
});
</script>