动态启用和禁用jquery旋钮 [英] Enable and disable jquery knob dynamically

问题描述

我正在使用出色的 jQuery旋钮插件.但是，我需要根据用户输入动态地启用/禁用该元素.支持在页面加载时具有disabled状态，这种状态的结果是没有鼠标(或触摸)事件绑定到canvas元素.有谁知道如何解决此问题，即如何(在页面加载后)绑定和取消绑定这些鼠标事件侦听器?

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?

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

Ideally I would like to do something like this (on a disabled knob)

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

修改: 我最终重写了绑定/取消绑定鼠标和触摸事件的源.解决方案不是完美的，因此如果有人可能有更好(更干净)的解决方案，我将悬而未决.

I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

推荐答案

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

For reference you can use my jsfiddle link > http://jsfiddle.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)

这篇关于动态启用和禁用jquery旋钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！