Question

我正在使用此插件https://github.com/cdp1337/jquery.readonly创建一个只读的复选框。功能正常。

复选框广告商ID是一个只读复选框。

但是，我需要区分readonly复选框和普通复选框，所以我添加了以下css -

.readonly_overlay{   background-color: #666;   opacity: 0.3;}

这也很好。

但是，现在的问题是元素是可移动/可滚动的。请参阅小提琴 - 请参阅小提琴 - http://jsfiddle.net/cr3fB/5/

观察当我们向下滚动时，只读覆盖物移动到盒子的蓝色边框之外，超过＆＃34;外部容器＆＃34;文本。

我在寻找什么

其中任何一个 -

对我正在使用的同一个插件进行了一些进一步的调整/修复（此插件似乎不再维护）。
其他一些插件，可以使复选框，单选按钮等只读（旧HTML中不能只读取的元素 - 少于HTML 5），同时也将它们与可编辑的复选框区分开来。

Answer 1

如果你认识CSS，那么你不需要这个插件。

我猜您已将readonly类赋予所有需要以只读方式显示的复选框。

这个CSS可以在没有插件的情况下解决您的问题。

.readonly{   background-color: #666;   opacity: 0.3;pointer-events:none;}

注意pointer-events: none 阻止指定HTML元素上的所有单击，状态和光标选项

请参阅link 希望，这可以解决你的问题。

编辑：正如您所说，您正在使用键盘导航并使用空格键检查取消选中，然后添加tabindex="-1"。例如

<input type="checkbox" class="readonly" tabindex="-1" value="yes" />

或使用这个小jQuery代码段。

$(".readonly").attr("tabindex","-1");

请参阅此link.

Answer 2

将间隔时间设置为较低的数字。它默认为250。 https://github.com/cdp1337/jquery.readonly#options

您应该能够将设置对象传递给构造函数，但是当我尝试它时，它没有工作。直接更改设置对象并不漂亮，但它确实有效。

settings = {
    intervaltime: 10, // milliseconds between each "tick". If your application never moves elements, feel free to set this to really high.
    //keypress: function(e){if(e.keyCode == 9) return true; else return false;},
    overlayClass: 'readonly_overlay',
    title: '',
    zindex: 'auto', // Set this to a number to force a specific z-index.
    formtargets: 'input,select,textarea,button,a', // Any element which can be targetted.
    show: function (overlay) {
        overlay.show();
    },
    hide: function (overlay) {
        overlay.hide();
    },
    tick: function (overlay) {
        // Function that is fired on every "tick" of the window to ensure accurate position.
        return;
    },

    _dummy: false
};

CSS调整jQuery readonly插件以区分readonly复选框无法正常工作

2 个答案: