动态启用和禁用jquery旋钮

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

理想我想这样做（在禁用旋钮）

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

编辑： 我最终改写结合/解除绑定鼠标和触摸事件源。解决方案并不完美，所以如果有人可能拥有更好的（更清洁的）解决方案，我就可以解决问题。

来源

2013-01-11 olif

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中检查这一点，因为在铬一些外部资源负载的问题）

来源

2014-06-25 09:56:53 jomon

尝试this禁用该控件。我仍然试图找到一种方法，使之回到

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

来源

2013-01-11 13:30:15 cristelo

嗨。 enable（）函数只是一个例子。到目前为止，在jquery旋钮中没有实现这样的功能。 – olif

您可以通过使用将其设置为只读data-readOnly = true – cristelo

是的。我可以把它作为只读使用该属性，但我想删除基于用户输入的属性。也就是说，我希望旋钮能够动态启用。 – olif

如果有人不喜欢接受的答案是如何破坏并重新创建内部canvas元素，然后结帐我的方法：

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

从本质上讲，检查实施draw()（我还建议监听在draw方法，而不是change和release值的变化，并哪些工作和mousewheel事件，这是不方便的）。

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()); 
    }, 
});

来源

2017-03-13 12:11:04

动态启用和禁用jquery旋钮

回答

相关问题