I'm using a jquery knob plugin. I want to make the knob readonly on button click.

(function() {
$(".dial").knob({
    'min':0,
    'max':360,
    'change' : function(degree){
        var img = $(".volume_bttn");
        if(radioSwitchState == 1)
        {
            img.css('-moz-transform', 'rotate('+degree+'deg)');
            img.css('-webkit-transform', 'rotate('+degree+'deg)');
            img.css('-o-transform', 'rotate('+degree+'deg)');
            img.css('-ms-transform', 'rotate('+degree+'deg)');
            var vol = ((degree)/360).toFixed(2);
            //console.log(vol);
            $("#jquery_jplayer_1").jPlayer("volume",(360-vol));
        }
    },
    'fgColor' : '#460E09',//460E09
    'bgColor' : "transparent",//transparent
    'width' : 107,
    'thickness' : 0.3,
    'displayInput' : false,
    'linecap' : 'butt'
    });
});

This is a code where I'm initializing the knob. How to make it readonly on button click?(I repeat)

I'm using a jquery knob plugin. I want to make the knob readonly on button click.

(function() {
$(".dial").knob({
    'min':0,
    'max':360,
    'change' : function(degree){
        var img = $(".volume_bttn");
        if(radioSwitchState == 1)
        {
            img.css('-moz-transform', 'rotate('+degree+'deg)');
            img.css('-webkit-transform', 'rotate('+degree+'deg)');
            img.css('-o-transform', 'rotate('+degree+'deg)');
            img.css('-ms-transform', 'rotate('+degree+'deg)');
            var vol = ((degree)/360).toFixed(2);
            //console.log(vol);
            $("#jquery_jplayer_1").jPlayer("volume",(360-vol));
        }
    },
    'fgColor' : '#460E09',//460E09
    'bgColor' : "transparent",//transparent
    'width' : 107,
    'thickness' : 0.3,
    'displayInput' : false,
    'linecap' : 'butt'
    });
});

This is a code where I'm initializing the knob. How to make it readonly on button click?(I repeat)

• javascript
• jquery
• jquery-knob

4 Answers 4

Looking into the code you cannot use the $('.knob').trigger('configure', {}) to set the readOnly state after the knob has been created. The reasons for this is because "configure" event is bound to:

var cf = function (e, conf) { 
    var k;
    for (k in conf) {
        s.o[k] = conf[k];
    }
    s._carve().init();
    s._configure()
    ._draw();
};

As seen in this function, these are the only methods called. The "readOnly" option is only looked at once from what I can see when the knob is first created so changing this value after calling $('.knob').knob(); doesnt work.

You must set this value during creation:

$('.knob').knob({
    "readOnly":true
 });

From the jQuery Knob Documentation:

$('.dial').trigger(
    'configure',
    {
        "min":10,
        "max":40,
        "fgColor":"#FF0000",
        "skin":"tron",
        "cursor":true
    }
);

So you would end up with something like this:

$('.button').click(function() {
    $('.dial').trigger('configure', {"readOnly": true});
}

See if the trigger approach posted by @dodo works. If not, I've got two workarounds:

1. Attempt to unbind all of the relevant events (click, scroll, mouse down up etc)
2. Create a blank div with the same dimensions as your knob and overlay it above the knob. You will still see it, but all events will be caught by the div, making your knob 'readonly'.

$(".dial").knob({
    min: 1
    max: 10
    stopper: true,
    readOnly: true,//if true This will Set the Knob readonly cannot click
    release: function (value) {
      //Do something as you release the mouse
    }
})