动态启用和禁用jquery旋钮

Enable and disable jquery knob dynamically

本文关键字：jquery 旋钮 启用 动态      更新时间：2023-09-26

我正在使用优秀的jQuery旋钮插件。但是，我需要根据用户输入动态地启用/禁用元素。支持在页面加载时使用disabled状态，其效果是没有鼠标(或触摸)事件绑定到canvas元素。有人知道如何解决这个问题吗?也就是说，如何(在页面加载后)绑定和解绑定这些鼠标事件侦听器?

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

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

我最终重写了绑定/解除绑定鼠标和触摸事件的源代码。解决方案并不完美，所以如果有人有更好(更干净)的解决方案，我留下这个问题。

html 

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

in 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链接> http://jsfiddle.net/EG4QM/(检查这个在firefox，因为一些外部资源负载问题在chrome)

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

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

本质上，检查draw()的实现(我还建议监听draw方法的值变化，而不是change和release，它们分别适用于和click和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()); 
  },
});

尝试禁用该控件。我还在想办法让它恢复

 $("#btnDisable").click(function(){
      $("#knob").off().prev().off();
    });
相关文章：