Demo of Selectable disable and enable using JQuery

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Press and hold Ctrl key for multiple selection

Tutorial Selectable

JQuery

$(document).ready(function() {
//////////////////////////
$( '#my_selectable' ).selectable();
////////////////

/////////
$('#b1').click(function(){
var str=$(this).attr("value");
$( "#my_selectable" ).selectable( str );
if(str=='disable'){
$("#b1").prop('value', 'enable');	
$("#b1").html(' Enable ');
$('#b1').removeClass( 'btn btn-danger ').addClass( 'btn btn-success ' );
}
if(str=='enable'){
$("#b1").prop('value', 'disable');	
$("#b1").html('Disable');
$('#b1').removeClass('btn btn-success ').addClass( 'btn btn-danger ' );
}
})
///
})

HTML

<ul id="my_selectable">
  <li id=i1>Item 1</li>
  <li id=i2>Item 2</li>
  <li id=i3>Item 3</li>
  <li id=i4>Item 4</li>
  <li id=i5>Item 5</li>
</ul>

Press and hold <kbd>Ctrl</kbd> key for multiple selection<br>

<button type='button' class='btn btn-danger'  value='disable' id='b1'>Disable</button>