CODEWITHSUNDEEP
jqueryjquery-uisliderjquery-ui-slider
Richard Max
Richard Max

Reputation: 53

jQuery - UI Slider mouse Disable and Re-Enabling mouse

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 );
    });

Upvotes: 2

Views: 5034

Answers (1)

Mihai Matei
Mihai Matei

Reputation: 24276

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 );

Upvotes: 3

Related Questions