1

我正在使用出色的jQuery 旋钮插件。但是，我需要根据用户输入动态启用/禁用元素。支持disabled在页面加载时设置状态，其效果是没有鼠标（或触摸）事件绑定到画布元素。有谁知道如何解决这个问题，即如何（在页面加载后）绑定和取消绑定这些鼠标事件侦听器？

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

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

编辑： 我最终重写了绑定/取消绑定鼠标和触摸事件的源代码。该解决方案并不完美，所以如果有人可能有更好（更清洁）的解决方案，我会留下这个问题。

4

3 回答 3

4

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

于 2014-06-25T09:56:53.017 回答
4

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

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

本质上，检查draw()实现（我还建议监听方法中的值变化，draw而不是changeand release，它们分别适用于 andclick和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-13T12:11:04.843 回答
1

试试这个来禁用控制。我仍在尝试找到一种方法来启用它

 $("#btnDisable").click(function(){
      $("#knob").off().prev().off();
    });
于 2013-01-11T13:30:15.577 回答