MS - toggle selected item class

1.9

by Eric Hynds

HTML

<script src="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/1.9/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/1.9/jquery.multiselect.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css">
<select multiple>
    <option value="foo">foo</option>
    <option value="bar" class="red">bar</option>
    <option value="baz">baz</option>
</select>

CSS

body { font-size:80% }
.red { color:red !important }

JavaScript

function toggleClass( elem, flag ){
    $( elem )
        .parent()
        .toggleClass('ui-state-active', flag);
}

var ms = $("select").multiselect({
    click: function( event, ui ){
        toggleClass( event.originalEvent.target, ui.checked );
    },
    checkAll: function( event, ui ){
        toggleClass( '.ui-multiselect-checkboxes label', true );
    },
    uncheckAll: function( event, ui ){
        toggleClass( '.ui-multiselect-checkboxes label', false );
    }
});