Question

我目前正在使用http://www.eyecon.ro/bootstrap-slider/，想知道如何禁用/锁定滑块。

<th>    <b>0%</b> <input type="text" class="spiders" value="" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" 

      data-slider-value="43.7" 
         id="sldid7" > <b> 100%</b>  </th>

通过动态检索滑块名称，尝试锁定滑块。试图以某种方式锁定它，但它无法正常工作。

$( '#'+$(this).prop('id') ).slider().Disable()

Answer 1

我认为您需要自己开发此功能。应该不那么困难。查看源代码，您可以添加一个名为disabled的额外属性，它将是一个布尔值。

在构造函数中，我将添加以下内容（我的示例中的最后一行是我的添加）：

this.min = this.element.data('slider-min')||options.min;
this.max = this.element.data('slider-max')||options.max;
this.step = this.element.data('slider-step')||options.step;
this.value = this.element.data('slider-value')||options.value;

this.disabled = this.element.data('slider-value')||options.disabled; // My addition

然后在Slider.prototype中我会添加新的disabled-boolean：

over: false,
inDrag: false,
disabled: false, // our new property

在此之下，您可以添加一些可以处理控件启用/禁用的方法：

enable: function(){
    this.disabled = false;
},

disable: function(){
    this.disabled = true;
},

现在，在处理移动滑块中旋钮的事件的每个方法中，我们希望他们知道，他们应该什么都不做。因此在方法中：

mousedown: function(ev) {
...
mousemove: function(ev) {
...
mouseup: function(ev) {

我会在方法的顶部包含以下内容：

if (this.disabled){
    return false;
}

理论上这应该足以提供您想要的功能。我没有测试过它。我刚刚在这里列出它，为您提供一些指导以及关于如何自己提供该功能的一些想法。

我希望它可以帮助您更接近目标。

锁定/禁用引导数字滑块

1 个答案: