Question

如何在选中时调整幻灯片范围checkbox？

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

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

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

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

我测试了这段代码，但没有用，我该怎么做？

的 FIND FIDDLE HERE

的 SCRIPT

$(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，您应使用选项已禁用属性进行设置。您还需要获取复选框的事件以设置滑块禁用和启用功能。

只需输入下面的代码，这会将属性设置为您的预期行为。你可以在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 );
     } 
  });    
});

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

的 FIND FIDDLE HERE

的 SCRIPT

1 个答案: