JQuery ui how to make certain elements in a selectable not selectable

Question

I have a list of JQuery ui selectable elements called "#selectable" and there are some elements inside the selectable that I no not want to be selectable, I want them there as list dividers.

Here is an example of what the list looks like:

<ol>
    <li class='custType'>This is a divider</li>
    <li class='ui-widget-content'>This is selectable</li>
    <li class='ui-widget-content'>This is selectable</li>
    <li class='ui-widget-content'>This is selectable</li>
    <li class='custType'>This is a divider</li>
    <li class='ui-widget-content'>This is selectable</li>
    <li class='ui-widget-content'>This is selectable</li>
</ol>

The ones that have the class "custType" are dividers and I no not want them to be selectable, it just divides the list up into categories.

Answer 1

Use the filter option to only select those items that should be selectable:

$( ".selector" ).selectable({ filter: "li" });

In your case:

$( "ol" ).selectable({ filter: "li.ui-widget-content" });

jsFiddle example