Styling Selectable Items With Classes

The selectable widget marks each item, as it's selected, with the ui-selected class. In fact, this is how the widget is able to determine selected items versus unselected ones. One thing it doesn't do, however, is apply any kind of styling to the selected element — that is left up to the developer. I kind of like that, given that I'm always tweaking the default widget styles anyway. There are two ways to go about visually indicating that an item has been selected.

The first route is to create a CSS rule that utilizes the ui-selected class. This is nice and simple, and doesn't involve any JavaScript code. So if you appreciate fine-grained CSS control down to the property level, use this approach. If, on the other hand, you want to use something that's already defined in a CSS class — jQuery UI CSS framework or elsewhere — you have to setup some event handlers on the selectable.

Here, the selected items are marked in an obvious way. One that's consistent with other widgets since it's using the ui-state-highlight class. The idea is to add the class to the selected element in a select event handler, and remove the class in the unselect handler.

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

The select handler adds the class to the ui.selected element, while the unselect handler removes the class from the ui.unselected element.