如何使用 jquery 使 jquery 旋钮只读？答案

【问题标题】：How to make jquery knob readonly using jquery?如何使用 jquery 使 jquery 旋钮只读？
【发布时间】：2013-08-13 07:48:35
【问题描述】：

我正在使用 jquery 旋钮插件。我想在按钮单击时将旋钮设为只读。

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

这是我初始化旋钮的代码。如何在按钮单击时使其只读？（我重复）

【问题讨论】：

标签： javascript jquery jquery-knob

【解决方案1】：

查看代码，您无法在创建旋钮后使用$('.knob').trigger('configure', {}) 设置只读状态。原因是因为“configure”事件绑定到：

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

正如在这个函数中看到的，这些是唯一被调用的方法。 “readOnly”选项仅在第一次创建旋钮时可以看到一次，因此在调用 $('.knob').knob(); 后更改此值不起作用。

您必须在创建期间设置此值：

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

【讨论】：

我可以确认这是正确的。在创建时设置它有效，但尝试使用 configure 设置它不起作用。这应该是正确的反应。

【解决方案2】：

来自jQuery Knob Documentation：

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

所以你最终会得到这样的结果：

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

【讨论】：

您的答案看起来不错，但在准备好文档时没有通过它不起作用，任何想法，谢谢。

【解决方案3】：

查看@dodo 发布的触发方法是否有效。如果没有，我有两种解决方法：

尝试取消绑定所有相关事件（单击、滚动、鼠标向下等）
创建一个与旋钮尺寸相同的空白 div，并在旋钮上方覆盖。您仍然会看到它，但所有事件都会被 div 捕获，从而使您的旋钮成为“只读”。

【讨论】：

【解决方案4】：

$(".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
    }
})

【讨论】：