Enable and disable jquery knob dynamically

Question

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.

Answer 1

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.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)