javascript - 锁定/禁用 Bootstrap 数字 slider

Question

我目前正在使用 http://www.eyecon.ro/bootstrap-slider/并想知道如何禁用/锁定 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>

通过动态检索 slider 名称，尝试锁定 slider 。尝试以这种方式锁定它，但它不起作用。

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

Answer 1

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

在构造函数中，我将添加以下内容(示例中的最后一行是我添加的内容):

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 中添加新的禁用 bool 值:

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

您可以在其下方添加一些方法来处理控件的启用/禁用:

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

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

现在，在处理 slider 中移动旋钮的事件的每个方法中，我们希望它们知道它们不应该做任何事情。因此在方法中:

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

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

if (this.disabled){
    return false;
}

这在理论上应该足以提供您想要的功能。我还没有测试过。我只是在此处列出它，以便为您提供一些关于如何自己提供该功能的指示和想法。

希望它能帮助你更接近你的目标。