Demo of Resizable with disabled option

false

true

We can disable the resizing of the resizable elements by setting the disabled option to true. By using the above two radio buttons you can set the disabled option value to either true or make it false. Check the resizing by selecting different radio buttons.

Based on the selection we are setting the disabled option value ( set option value ) and then reading the option value ( get option value ) to display inside a div tag.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
disabled:false
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "disabled" );
$('#d1').html( " <b>Status of disabled:</b> " + read_opt );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()=='true'; 
// set the option value
$( "#resize_id" ).resizable( "option", "disabled", sel ); 
// get the option value 
var read_opt = $( "#resize_id" ).resizable( "option", "disabled" ); 
$('#d1').html( " <b>Status of disabled:</b> " + read_opt );
})
///////
})
</script>

HTML

<table class='table'>
<tr><td>
<input type='radio' name='r1' id='r1' value=false checked>false</td>
<td><input type='radio' name='r1' id='r2' value=true>true</td>
</tr></table>

<br><button type='button' class='btn btn-secondary'  id=d1></button>

<br><br>

<div class='row'> <div class='col-md-12'>

<div id="resize_id" class=resize_cl></div>

</div></div>