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

Edit: 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.

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

Edit: 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.

• javascript
• jquery
• jquery-knob

3 Answers 3

html

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

script

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

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

If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:

https://jsfiddle/604kj5g5/1/

Essentially, check the draw() implementation (I also remend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).

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

Try this to disable the control. I'm still trying to find a way to enable it back

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