我的假设是,如果我禁用了一个div,所有的内容也都禁用了。

然而,内容是灰色的,但我仍然可以与它互动。

有办法做到吗?(禁用一个div,让所有的内容也禁用)


当前回答

禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。

Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。

其他回答

HTML输入控件可以使用'disabled'属性禁用。一旦为输入控件设置了'disabled'属性,就不会调用与该控件关联的事件处理程序。

如果你愿意,你必须模拟上述行为的HTML元素,不支持'disabled'属性,如div。

如果你有一个div,你想要在这个div上支持点击或一个键事件,那么你必须做两件事: 1)当你想禁用div时,像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中,检查是否在div上设置了disabled属性。如果是,那么忽略点击或键事件(例如,立即返回)。如果未设置disabled属性,则执行div的单击和/或键事件逻辑。

以上步骤也是浏览器独立的。

上面的许多答案只适用于表单元素。禁用任何DIV(包括其内容)的简单方法是禁用鼠标交互。例如:

$("#mydiv").addClass("disabledbutton");

CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

补充:

许多人这样评论:“这只会禁止鼠标事件,但控件仍然是启用的”和“你仍然可以通过键盘导航”。你可以将此代码添加到你的脚本中,输入不能以键盘选项卡等其他方式到达。您可以更改此代码以满足您的需要。

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

如果你只是想阻止人们点击,并且不太担心安全问题——我已经找到了一个z-index为99999的绝对div。您不能单击或访问任何内容,因为div被放置在它上面。可能更简单一点,是CSS唯一的解决方案,直到你需要删除它。

我只想提到这个用于启用和禁用元素的扩展方法。我认为这比直接添加和删除属性要干净得多。

然后你只需做:

$("div *").disable();

禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。

Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。