单击时启用jqueryUI滑块

Question

Im trying to enable the slider when the checkbox is checked!

the html:

  <label for="zerovalueback">Zero Back</label>
    <input id="zerovalueback" type="checkbox" name="zerovalueback">
    <div id="slider"></div>
    <div class="sliderValues">
        <span class="leftVal">
        </span>
         = = = 
        <span class="rightVal">
        </span>
    </div>

the script:

  jQuery.noConflict(); 
jQuery(document).ready(function() {

            jQuery('body').on('click', '#zerovalueback', function() {

            var status = jQuery(this).prop("checked");      console.log(status);
            if (status == 'true') {

                jQuery( "#slider" ).slider({
                range : "max",
                    min : 1,
                    max : 10,
                    value : 6,
                    slide: function(event,val){
                        jQuery('.leftVal').text(val.value);
                    } 
                 }); 
             };
         });
    });

Everything is linked correctly, because If I call simply the slider before the on(click) function it works.

Does anybody have idea how to solve this?

Answer 1

The if statement was not correct, advice from @DontVoteMeDown was helpfull, it should be

if (status === true) {

                jQuery( "#slider" ).slider({
                range : "max",
                    min : 1,
                    max : 10,
                    value : 6,
                    slide: function(event,val){
                        jQuery('.leftVal').text(val.value);
                    } 
                 }); 
             }

Answer 2

If your need is to enable disable jQuery. There are methods called enable() and disable(). you can find more info here .

To disable slider you can use jQuery( "#slider" ).slider('disable'); and to enable slider you can use jQuery( "#slider" ).slider('enable')

You can find the working demo here