Styling Selectable Items With Classes

Marking the selected jQuery UI selectable element by adding a class, and removing it when unselected.

by Michele Pisani

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css">
<ul id="selectable" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Item 1</li>
    <li class="ui-widget-content ui-corner-all">Item 2</li>
    <li class="ui-widget-content ui-corner-all">Item 3</li>
    <li class="ui-widget-content ui-corner-all">Item 4</li>
    <li class="ui-widget-content ui-corner-all">Item 5</li>
    <li class="ui-widget-content ui-corner-all">Item 6</li>
    <li class="ui-widget-content ui-corner-all">Item 7</li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 40%;
}

ul li {
    padding: 0.4em;
    margin: 0.2em;
    cursor: pointer;
    font-size: 0.8em;    
}

JavaScript

var sel = '0';
$( "#selectable" ).selectable({
    selected: function( e, ui ) {
        $( ui.selected ).addClass( "ui-state-highlight" );
        $('#selectable .ui-selected').removeClass('ui-selected')
    },    
    unselected: function( e, ui ) {
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    }
});