如何在chrome和firefox中右键单击禁用/启用复选框答案

【问题标题】：How to disable/enable a checkbox on right-click in chrome and firefox如何在chrome和firefox中右键单击禁用/启用复选框
【发布时间】：2013-04-24 00:50:27
【问题描述】：

我编写了一些代码，允许我在右键单击复选框时禁用/启用复选框。它适用于 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 相同的功能。因此可以启用这些框。

【问题讨论】：

这将是很多工作，但从技术上讲，当您禁用该元素时，您可以在其顶部堆叠一个透明元素（因此用户看不到它），相同的大小/形状，并收听click 事件。启用后，隐藏/删除堆叠元素
+1 提出带有小提琴和初步研究的良好问题！
@Ian 我想你的意思是“透明元素”？
另请注意，此代码禁用页面上每个项目的上下文菜单。
@ben336 是的，我想是的。哈哈我改了，谢谢

标签： javascript jquery right-click

【解决方案1】：

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

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

【讨论】：

当您说“根据规范”时，您指的是什么规范？
This:disabled 当为表单控件设置时，此布尔属性禁用用户输入控件

【解决方案2】：

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

这里有一些东西可以帮助您入门：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（或contextmenu）事件同时针对input 和透明元素。从技术上讲，您可以只使用父级 <span> - 给它一个特殊的类，然后监听 click 事件。这些事件将从其后代中冒出来，所以应该没问题。

【讨论】：

【解决方案3】：

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

【讨论】：