Demo of adding classes to Selectable by usser selection

JQuery

$(document).ready(function() {
//////////////////////////
 $('#my_selectable').selectable();
////////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#my_selectable" ).selectable( "option", "classes.ui-selectable", sel );
var present_class = $( "#my_selectable" ).selectable( "option", "classes.ui-selectable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
})
////////////
var present_class = $( "#my_selectable" ).selectable( "option", "classes.ui-selectable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
///////////
})

HTML

<ul id="my_selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r1' value='ui-state-highlight' >ui-state-highlight</label>
</div>
<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-priority-secondary' >ui-priority-secondary</label>
</div>
<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-disabled' >ui-state-disabled</label>
</div>
<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-priority-primary' checked>ui-priority-primary</label>
</div>

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-error' >ui-state-error</label>
</div>
<p id=d1 class='bg-warning text-dark hdd'></p>