jQuery - UI Slider mouse Disable and Re-Enabling mouse

Question

Is it possible to disable mouse clicks, than re-enable mouse clicks for a jQuery UI slider?

jQuery Examples doen't seem to function

Code examples

Initialize a slider with the disabled option specified.

$( ".selector" ).slider({ disabled: true });

Get or set the disabled option, after init.

//getter
var disabled = $( ".selector" ).slider( "option", "disabled" );
//setter
$( ".selector" ).slider( "option", "disabled", true );

Edit 1

Heres is the trigger for unhiding the hidden check boxes....Once clicked it should disable mouse clicks on the slider and allow the checkboxes to take over.

        $pageHelpYes.click(function () {

            $pageHelpHidden.animate({
                    'height': '650px'
            }, 1000);
            $pageHelpYes.attr('disabled', 'disabled');
            $("#R_C-designPrice2, #R_C-designPrice, #R_C-designAdded").addClass('R_C-added');
            $pageHelpNo.removeAttr('disabled');
            $("#designHidden").val('Yes');

            var checkedCount = $(":checkbox:checked").length;

            var s = $pageSlider,
                    val = s.slider("value", checkedCount),
                    step = s.slider("option", "step");
            s.slider("value", checkedCount);
            $pages.val(("value", checkedCount));
            $amount.val([("value", checkedCount) * pageAmount] / [$daySlider.slider("value")]);

  //Slider Mouse Disable Code below.....
            var kill = $("pagesSlider").slider("option", "disabled"); 
            $("pageSlider").slider( "option", "disabled", true );

            $slideCalc.click();

Heres the Slider Code.

    $pageSlider.slider({ 
            disabled: false,
            animate: true,
            range: "min",
            value: 5,
            min: 1,
            max: 25,
            step: 1,
            slide: function (event, ui) {
                    $pages.val(ui.value);
                    $slideCalc.click();


            }
    });

Here's the code which hides the checkboxes and should reactivate the slider mouse clicks.

     $pageHelpNo.click(function () {
            $pageHelpHidden.animate({
                    'height': '0px'
            }, 1000);
            $("#R_C-designPrice2, #R_C-designPrice, #R_C-designAdded").removeClass('R_C-added');
            $pageHelpYes.removeAttr('disabled');
            $pageHelpNo.attr('disabled', 'disabled');
            $("#designHidden").val('No');

  //Slider Re-activate Code below.....
            var kill = $("pagesSlider").slider("option", "disabled"); 
            $("pageSlider").slider( "option", "disabled", false );
    });

Just as you have stated it I say yes, but perhaps you should explain a little bit more detailed what you exactly try to do. In the moment it sounds to me that you have something special in your head for what you must change the code of the slider itself. — Sven Bieder, Mar 19 '12 at 21:24
Please could you make a demo of the problem if possible, perhaps using [jsFiddle](http://jsfiddle.net/) — andyb, Mar 19 '12 at 22:36

score 3 · Answer 1 · answered Jul 25 '12 at 07:59

You've defined the slider variable as:

$pageSlider.slider({    
    //... 
});

Then you called the disable method as:

$("pageSlider").slider( "option", "disabled", true );

So the problem is that you used a selector for a tag named "pageSlider", which I'm very sure that it will never exists. You have to use your slider variable.

Try to disable the slider like this:

$pageSlider.slider( "option", "disabled", true );

jQuery - UI Slider mouse Disable and Re-Enabling mouse

1 Answers1