Demo of Selectable disabled option using JQuery UI

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


You can select elements only when disabled option is false

Tutorial Selectable

JQuery

$(document).ready(function() {
//////////////////////////
$( '#my_selectable' ).selectable({
});
////////////////
$("#b1").click(function(){
$( "#my_selectable" ).selectable( "option","disabled",true );
var present_status = $( "#my_selectable" ).selectable( "option", "disabled" );
$('#d1').html( " <b>Status of disabled option    :  </b>: " + present_status );
})
/////////
var present_status = $( "#my_selectable" ).selectable( "option", "disabled" );
$('#d1').html( " <b>Status of disabled option    :  </b>: " + present_status );
//////////
})

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>

<button type="button" class="btn btn-danger" id=b1>Click to disabled </button>
<a href=selectable-disabled.php><button type="button" class="btn btn-success">Refress & Try again</button></a>
<br><br>
<p id=d1 class='bg-warning text-dark hdd'></p>