4

我编写了一些代码，允许我在右键单击复选框时禁用/启用复选框。它适用于 IE，但不适用于 Chrome 或 Firefox。

rightClickFunc: function (e) 
{
    var obj;
    if ($.browser.msie) obj = event.srcElement;
    else obj = e.target;
    stuff.disableEnableObject(obj);
    return false;
},

disableEnableObject: function (o)
{
    if (o.getAttribute("disabled") == null)                
          $('#'+o.id).attr("disabled", "disabled");
    else  $('#'+o.id).removeAttr("disabled");
}

如何在 Chrome 中获得与 IE 相同的功能？问题似乎是右键单击 chrome 中的禁用项目确实会打开上下文菜单（右键菜单）。

我制作了一个代码示例 - 请参阅http://jsfiddle.net/e72M6/。在 IE 和 chrome 中运行它以查看差异。（IE 可以启用这些框，Chrome 不能）。

我希望其他浏览器具有与 IE 相同的功能。因此可以启用这些框。

4

3 回答 3

4

根据规范禁用元素不应响应点击事件。

您想要做的是opacity: 0在此之上覆盖一个不可见的 ( ) 元素并将其用作您的事件的代理。请记住，一些旧浏览器不理解opacity.

于 2013-04-23T16:36:14.227 回答
3

这将是很多工作，但从技术上讲，当您禁用该元素时，您可以在其顶部堆叠一个透明元素（因此用户看不到它），相同的大小/形状，并侦听该单击事件。启用后，隐藏该堆叠元素。

这里有一些让你开始的东西：http: //jsfiddle.net/8dYXd/2/

它使用这种结构：

<span>
    <input id='a' type='checkbox' disabled="disabled" />
    <span class="disabled-detector"></span>
</span>

这个CSS：

span {
    position: relative;
}

span.disabled-detector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

input+span.disabled-detector {
    display: none;
}

input[disabled]+span.disabled-detector {
    display: inline;
}

请注意您仍然可以“单击”禁用的元素。

您必须更新它以确保click(or contextmenu) 事件同时针对 theinput和透明元素。从技术上讲，您可以只使用父<span>级 - 给它一个特殊的类，并在其上监听click事件。这些事件将从其后代中冒出来，所以应该没问题。

于 2013-04-23T16:50:27.543 回答
2

它可以禁用元素，但不能重新启用它。这是因为禁用的元素不会触发鼠标事件。我不认为有办法让你在所有浏览器中都能正常工作。

于 2013-04-23T16:30:46.637 回答