Question

我有一个jQueryUI范围滑块，默认情况下被禁用。

$( ".sliderrange" ).slider({
  range: true,
  disabled: true,
  min: 100,
  max: 200,
  values: [ 75, 300 ],    
  slide: function( event, ui ) {
   $('input').val( ui.values[ 0 ].toFixed(2) + " - " + ui.values[ 1 ].toFixed(2) +" mm");
  }
});

有没有办法在禁用和启用滑块之间切换一个复选框，就像它在输入框上的操作一样？

$('.check').change(function(){
  var slide = $('.sliderrange'),
      input = $('.mm');
      input.prop('disabled', function (_, val) { return ! val; });  // working for the input box
      slide.slider("enable", this.disable); // not working for the slider.
});

HTML

 Enable<input type='checkbox' class='check'>
<div class="sliderrange"></div>
<input class='mm' type='text'  disabled>

Answer 1

当然，只需添加使用滑块的disable方法：

if(!$(this).is(":checked"))$( ".sliderrange" ).slider( "disable" );

<强> jsFiddle example

在jQueryUI滑块上禁用和启用之间切换

1 个答案: