javascript - 动态启用和禁用 jquery 旋钮

Question

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

理想情况下我想做这样的事情(在禁用的旋钮上)

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

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

Answer 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 中存在一些外部资源加载问题)