Unable to apply JqueryUI Resizable AspectRatio after initialization?

Question

I was trying to turn the aspect ratios on/off dynamically in JQueryUI resizable, however even after setting the option to false, it keeps maintaining the aspect ratio. Below is

Answer 1

Another solution is to save resizable options in a variable and destroy and reinitialize the widget with the updated options:

var options = $("#resizable").resizable("options");
if (ischecked) {
    options.aspectRatio = .75;
} else {
    options.aspectRatio = false;
}
$("#resizable").resizable("destroy");
$("#resizable").resizable(options);

Answer 2

This worked for me with no patching

$('#resizable')
  .resizable('option', 'aspectRatio', false)
  .data('uiResizable')._aspectRatio = false;

This part .data('uiResizable')._aspectRatio = false; comes to the rescue

Answer 3

I realize that this is an old post but in case anyone still needs an answer you can do it like this:

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
        $( "#resizable" ).resizable({aspectRatio : .75});
    } else {
        $( "#resizable" ).resizable();
    }
});

Answer 4

I don't know if it will work or what will happen. But you can try something like this.

$(function(){
    var settings = {
        aspectRatio : .75  
    };
    $("#tadaa").resizable(settings);

    $("input").change(function(){
        if($(this).is(":checked"))
        {

            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable();
        }
        else  
        {
            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable(settings);
        }   
    });
});

Live demo, currently only the bottom draggable element is styled to use, horizontal div is not styled.

http://jsfiddle.net/t6xFN/1/