Enable And Disable Jquery Knob Dynamically

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

Solution 1:

html

<input class="knobSlider" data-readOnly="true">
<buttonid="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)

Solution 2:

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

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

Essentially, check the draw() implementation (I also recommend 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()); 
  },
});

Solution 3:

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