How to disable jQuery slider control unless radio button is checked

Question

I am looking to disable the functionality of the jQuery UI sliders until a radio button is checked. Pretty straight forward but I have not had any luck with the things I have tried so I am looking to get some help. For convenience: http://jsfiddle.net/nlem33/L5cY6/11/

    $('#slider1').slider({

    min: min_value,
    max: max_value,
    step: 1,

    slide: sliderHandler,
    stop: function (event, ui) {

    }
});

var min_value = 0;
var max_value = 630;

$('#slider2').slider({

    min: min_value,
    max: max_value,
    step: 5,

    slide: sliderHandler,
    stop: function (event, ui) {

    }

});

Answer 1

You can initialize them disabled and then enable them when a radio button is clicked:

$('#slider1').slider({

        min: min_value,
        max: max_value,
        step: 1,
        disabled: true, // <= disabled on init
        slide: sliderHandler,
        stop: function (event, ui) {

    }
});


// Enable function :

$(':radio').click(function() {
    $('#slider1, #slider2').slider('enable');
});

http://jsfiddle.net/L5cY6/23/