禁用 DIV 中的链接和表单输入答案

【问题标题】：Disable links and form inputs inside a DIV禁用 DIV 中的链接和表单输入
【发布时间】：2010-11-05 23:44:10
【问题描述】：

我正在尝试找出是否可以完全禁用整个 DIV 的所有交互 - 链接（文本或图像）、表单输入/按钮。

例如，您有一个分为 3 个步骤的注册表单，但都显示在同一页面中。除非已满足第一步 (DIV1) 要求，否则整个 DIV2 将被淡化（即 50%），并且此 DIV2 中包含的任何元素都绝对不可点击。

我看到了一些其他问题，其中只提到了如何禁用表单元素，而不是普通链接。将 DIV2 与另一个 DIV（具有更高的 z-index 和 50% 的不透明度）简单地重叠是否有意义，这将防止与下面的 DIV 进行任何交互？

谢谢！

更新： 我尝试走“重叠掩码 div”路线，但由于某种原因，我的脚本仅在您第一次单击“禁用”项目时才有效。这是我正在使用的代码：

$('.disabled-mask').click(function() {
$(this).remove();
$('.content-box').not(this).each(function(){
    $(this).append('<div class="disabled-mask"></div>');
    $(this.target).animate({opacity:'hide'}, slidespeed);
});

});

"disabled-mask" 是我放置在每个需要禁用的 "content-box" 上方的 div。单击禁用掩码时，我试图隐藏该掩码，然后在每个其他项目上附加一个掩码。正如我所说，我第一次点击它工作正常，但之后没有任何反应。

提前感谢您的帮助。

【问题讨论】：

标签： jquery

【解决方案1】：

在链接上设置disabled 属性是non-standard，应该避免。创建一个重叠的<div> 元素可能是最好的解决方案。

【讨论】：

【解决方案2】：

另外两种可能性是：通过 js/jquery 将链接标签替换为另一个标签（例如 span）或修改链接的点击事件处理程序（仅在客户端启用 js 时才有效）！

【讨论】：