jquery selectable plugin to select the first level childs, not the childs of childs

Question

   <ol id="selectable">
    <li class="ui-widget-content">
           <div><input type="checkbox" /></div>
           <div>Item1</div>
           <div>Khanput</div>
           <div>1/2/3</div>
           <div>15:03:16</div>
           <div>--------</div>
           <div>23m</div>
           <div>Chakwal</div>
       </li>
   </ol>

I just want to select the 'li' element not the 'div' but it selects them all. I have tried a few things but they did not work out.

Could you link to an example of what you're trying to achieve? not everyone interested in your question knows what jQuery-ui-selectable is. — Dan Davies Brackett, Sep 22 '11 at 22:36
(separate issue) you haven't provided any JS with your HTML. Is there some that goes with it? — Dan Davies Brackett, Sep 22 '11 at 22:36

score 1 · Answer 1 · answered Sep 22 '11 at 22:54

If you make the <li> element selectable it stands to reason that the content inside it would also become 'selected' when the <li> is clicked.

As far as jQuery UI is concerned though, only the <li> is actually 'selected'. You can see this as your <li> will be given a class of ui-selected when it's selected; the content within, conversely, is given the ui-selectee class.

score 0 · Answer 2 · edited May 23 '17 at 11:43

You can add this custom plugin

$.widget("xim.singleSelectable", {
    options: {
        select: null
    },
    _create: function () {
        var self = this;
        this.element.addClass('ui-selectable');
        this.element.delegate('li', 'click', function (e) {
            self.element.find('>li').removeClass('ui-selected');
            $(this).addClass('ui-selected');

            if ($.isFunction(self.options.select)) {
                self.options.select.apply(self.element, [e, this]);
            }

        });
    },
    selected: function () {
        return this.element.find('li.ui-selected');
    },
    destroy: function () {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
    }
});

then your code will be

$( "#selectable" ).selectable({         
            stop: function() {                
                $( "li.ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );                   
                    alert(index);                                       
                });                
            }                        
        });

I found the solution here How to prevent multiple selection in jQuery UI Selectable plugin

jquery selectable plugin to select the first level childs, not the childs of childs

2 Answers2