Geek Answers Handbook

Is there a way to get this default jquery grid select object for multiple selection?

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

Im using a jquery selectable (link above), but the user must hold the control button down to select multiple items ... Is there any user who can select multiple items without holding the control button?

In other words: I want the user to be able to select any item by clicking on it and cancel it by clicking again.

Any thoughts?

+4
source share
2 answers

You can set metaKey to mousedown to mimic Ctrl :

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

See DEMO .

+1
source

In the example by reference, you can modify the script to change the elements as radio buttons

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

More articles:


All Articles