Question

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

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

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

修改我最终重写了绑定/解除绑定鼠标和触摸事件的源代码。解决方案并不完美，所以如果有人可能有一个更好（更清洁）的解决方案，我会把问题保持开放。

Answer 1

<强> HTML

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

<强>脚本

在doc ready中，

$(".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链接＆gt; http://jsfiddle.net/EG4QM/（在Firefox中查看此内容，因为chrome中存在一些外部资源加载问题）

Answer 2

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

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

基本上，请检查.menu { opacity:0; transition: opacity .4s ease-in-out; } .animated { opacity:1; }实施（我还建议您使用draw()方法而不是draw和change来监听值更改，这些更改适用于release分别为1}}和click事件，这是不方便的。）

mousewheel

Answer 3

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

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

动态启用和禁用jquery旋钮

3 个答案: