Programatically select jQueryUI Selectables
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<form>
<div class='myBoxes'>
<label>Check 1<input type="checkbox" id="chk1" /> </label>
<label>Check 2<input type="checkbox" id="chk2" /> </label>
<label>Check 3<input type="checkbox" id="chk3" /> </label>
<label>Check 4<input type="checkbox" id="chk4" /> </label>
</div>
</form>
CSS
label {
display: block;
padding: 7px;
width: 120px;
margin-bottom: 14px;
border: 1px solid red;
}
label.ui-selecting {
background: lightgreen;
}
.LabelHighlight {
background: lightgreen;
}
JavaScript
$(".myBoxes").selectable({
filter: 'label',
stop: function() {
$(".ui-selected input", this).each(function() {
this.checked = !this.checked;
if ($(this).is(':checked')) {
console.log($(this));
$(this).parent().addClass("LabelHighlight")
} else {
$(this).parent().removeClass("LabelHighlight")
}
});
}
});