有没有办法让这个 jquery 网格选择对象默认为多选？答案

【问题标题】：Is there a way to get this jquery grid selection object to default to multi-select?有没有办法让这个 jquery 网格选择对象默认为多选？
【发布时间】：2011-06-26 05:52:39
【问题描述】：

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

我正在使用 Jquery Selectable（上面的链接），但用户必须按住控制按钮才能选择多个项目...无论如何用户可以在不按住控制按钮的情况下选择多个项目？

换句话说：我希望用户能够通过单击来选择任何项目并通过再次单击来取消选择它。

有什么想法吗？

【问题讨论】：

标签： jquery selectable

【解决方案1】：

你可以在mousedown上设置metaKey来模拟Ctrl被按下：

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

看到这个DEMO。

【讨论】：

【解决方案2】：

从链接上的示例中，您可以修改脚本以将元素更改为切换

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

【讨论】：