动态启用和禁用 jquery 旋钮答案

【问题标题】：Enable and disable jquery knob dynamically动态启用和禁用 jquery 旋钮
【发布时间】：2013-01-11 13:24:36
【问题描述】：

我正在使用出色的jQuery knob plugin。但是，我需要根据用户输入动态启用/禁用元素。支持在页面加载时使用disabled 状态，其效果是没有鼠标（或触摸）事件绑定到画布元素。有谁知道如何解决这个问题，即如何（在页面加载后）绑定和取消绑定这些鼠标事件监听器？

理想情况下，我想做这样的事情（在禁用的旋钮上）

$('.button').click(function() {
    $('.knob').enable();
});

编辑： 我最终重写了绑定/取消绑定鼠标和触摸事件的源代码。该解决方案并不完美，因此如果有人可能有更好（更清洁）的解决方案，我将问题留待解决。

【问题讨论】：

标签： javascript jquery jquery-knob

【解决方案1】：

html

<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>

脚本

文档准备好了，

$(".knobSlider").knob();
$("#testBtn").click(function(){
    $(".knobSlider").siblings("canvas").remove();
    if($(".knobSlider").attr("data-readOnly")=='true'){
        $(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
    }
    else{
        $(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
    }
});

作为参考，您可以使用我的 jsfiddle 链接 > http://jsfiddle.net/EG4QM/（在 Firefox 中检查，因为 chrome 中存在一些外部资源加载问题）

【讨论】：

【解决方案2】：

如果有人不喜欢接受的答案如何破坏和重新创建内部画布元素，请查看我的方法：

https://jsfiddle.net/604kj5g5/1/

基本上，检查draw() 实现（我还建议在draw 方法中监听值的变化，而不是change 和release，它们分别适用于click 和mousewheel 事件，哪个imo不方便）。

var $input = $("input");

var knobEnabled = true;
var knobPreviousValue = $input.val();

$input.knob({
  draw: function () { 
    if (knobPreviousValue === $input.val()) {
      return;
    }

    if (!knobEnabled) {
      $input.val(knobPreviousValue).trigger("change");
      return;
    }

    knobPreviousValue = $input.val();

    console.log($input.val()); 
  },
});

【讨论】：

【解决方案3】：

尝试this 禁用该控件。我仍在尝试找到一种方法来启用它

 $("#btnDisable").click(function(){
      $("#knob").off().prev().off();
    });

【讨论】：

嗨。 enable() 函数只是一个例子。到目前为止，jquery 旋钮中还没有实现这样的功能。
是的。我可以通过使用该属性将其设置为只读，但随后我想根据用户输入删除该属性。也就是说，我希望旋钮能够动态启用。