有沒有辦法讓這個jQuery網格選擇對象默認爲多選？

Question

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

即時通訊使用jQuery可選（以上鍊接），但用戶必須按住控制按鈕向下選擇多個項目......反正是有用戶可以選擇多個項目，而不保持控制按鈕了嗎？

換句話說：我希望用戶能夠通過點擊選擇任何項目並通過再次單擊取消選擇它。

有什麼想法？

Answer 1

從鏈路上的例子，你可以修改腳本更改元素切換

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

Answer 2

您可以在鼠標按下設置metaKey模擬按Ctrl被壓：

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

請參閱DEMO。