Toggle elemnts in selectable on mouse click

Question

What I need to achieve is

1)i can select several element with every click.

2)When I click on the selected element again, It should be deselected

HTML CODE :

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
     <li class="ui-widget-content">Item 2</li>
     <li class="ui-widget-content">Item 3</li>
     <li class="ui-widget-content">Item 4</li>
     <li class="ui-widget-content">Item 5</li>
     <li class="ui-widget-content">Item 6</li>
     <li class="ui-widget-content">Item 7</li>
</ol>

CSS CODE:

#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;
     width: 60%; }
#selectable li {
     margin: 3px;
     padding: 0.4em;
     font-size: 1.4em;
     height: 18px; }

JQUERY CODE:

$(function() {
    $( "#selectable" ).selectable();
});

view this code in jquery site

can you be more specific about your requirement? do you want to show all clicked element as selected? — arjuncc, Mar 08 '13 at 08:30
i want when clicked on element its be selected and when again clicked on this, its be deselected. — , Mar 08 '13 at 08:36
@RuneFS, In normal case, it wont toggle by clicking the element again. I think he was trying to achieve that toggling effect — arjuncc, Mar 08 '13 at 09:09
@arjuncc yes you might be right but we are both guessing. OP should state what works, what he want's to achieve _and_ what didn't work with the approach. With the description given here it could simply be that the script is not loaded and that `.selectable()` doesn't work. I don't think it is but the facts in the question does make that possible — Rune FS, Mar 08 '13 at 09:34
@RuneFS, You are right, It could also be possible a script error. That was what I understood from his question. I was guessing based on his comment 'i want when clicked on element its be selected and when again clicked on this, its be deselected'. So, I think he is the only one who could do make us know what he exactly want to achieve. — arjuncc, Mar 08 '13 at 09:38

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

OK I hope my answer will help. Here, what you should do is to set your metakey to true on mouse down event. In the sample code the event is binded. I got this from stackoverflow itself here, here.

Now for your specific problem click the following link JSFIDDLE

edited May 23 '17 at 12:14

Community

1
1

answered Mar 08 '13 at 08:48

arjuncc

3,227
5
42
77

Toggle elemnts in selectable on mouse click

1 Answers1