javascript - 选中复选框时如何禁用幻灯片范围？

Question

如何在选中复选框时禁用幻灯片范围？

选中复选框时id="unlimited"我想禁用幻灯片范围

$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "disable" ) );

但是当未选中复选框时id="unlimited"我想启用幻灯片范围

$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );

我测试了这段代码但不起作用，我该怎么做？

<强> FIND FIDDLE HERE

<小时/>

脚本

$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 0,
min: 0,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});      
if (document.getElementById('unlimited').checked) 
    {
        $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "disable" ) );
    } 
else 
    {
        $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
    }

});

Answer 1

要禁用 JqueryUi Slider，您应该使用 option disabled 属性来设置它。此外，您还需要捕获复选框事件来设置 slider 禁用和启用能力。

只需输入以下代码，这会将属性设置为您的预期行为。您可以在 http://jsfiddle.net/b63u9krv/10/ 中看到这一点也像下面这样:

$(function() { 
  $("#slider-range-min" ).slider({
     range: "min",
     value: 0,
     min: 0,
     max: 700,
     slide: function( event, ui ) {
              $( "#amount" ).val( "$" + ui.value );
            }
  });

  // Grab the click event of check box.
  $( "#unlimited" ).click(function(){
   if(this.checked)
     {  
       // set the slider as disable
       $( "#slider-range-min" ).slider( "option", "disabled", true );
     } 
   else 
     {
       // set the slider as enable again when you click to uncheck
      $( "#slider-range-min" ).slider( "option", "disabled", false );
     } 
  });    
});