logo标签列表

如何禁用所有div内容

javascriptjqueryhtml
356

我原以为如果禁用一个div，所有内容也会被禁用。

然而，内容变灰了，但我仍然可以与它交互。

有没有办法做到这一点？（禁用div并使所有内容也被禁用）

29个回答
697

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

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

CSS

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

补充：

很多人评论说：“这只会禁止鼠标事件，但控件仍然可用”和“您仍然可以使用键盘导航”。您可以将此代码添加到脚本中，以防止通过其他方式（如键盘 Tab 键）访问输入。您可以更改此代码以适应您的需求。

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });
29
答案正确，+1！你刚刚为我节省了数小时的工作！！！（眼泪汪汪）可能已经爱上你了。该功能在所有浏览器中都受支持：http://caniuse.com/#feat=pointer-events - tim-montague
11
我知道现在已经很晚了，但是还是要提醒大家，IE 8、IE 9和IE 10都不支持这个功能。请参考http://caniuse.com/#feat=pointer-events。 - Razort4x
15
这将仅禁止鼠标事件，但控件仍然启用。 - Mario Levrero
51
注意：使用此解决方案，您无法使用鼠标或触控设备与此元素或其任何子元素进行交互，但您仍然可以使用键盘切换到它。 - Adam
14
虽然仍可通过键盘进行访问。 - Tomer W
显示剩余16条评论
151

使用类似于 JQuery 的框架来处理以下任务：

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

使用jQuery禁用和启用div块中的输入元素 可以帮助您！

自jQuery 1.6起，应使用.prop而不是.attr进行禁用。

2
手动选择所有输入...我会尝试，但将div标记为禁用不应该就足够了吗？ - juan
你可以使用jQuery检查它们的状态并保存。在页面加载后直接在全局区域执行以下代码：$('#idOfPagination').is(':disabled') ? disablePagination = false : disablePagination = true; - Martin K.
请注意，这并没有回答问题，因为它并没有禁用所有div内容。它只影响输入元素。许多框架和布局器使用可点击的'li'元素或'a'元素。这些元素具有自定义的鼠标悬停和单击事件，因此它们的行为方式类似于按钮。它们不会受到影响。分离所有单击事件并在切换函数中重新附加它们是可能的，但不是通过本答案中的代码语句完成的。 - Kenyakorn Ketsombut
这应该是答案。 - Hrvoje Batrnek
只是为了澄清其他人在这个问题的其他地方提到的内容。在我看来，删除父div的鼠标事件并不能真正实现期望的结果。因为你仍然可以通过Tab键浏览div的内容，并使用空格选择按钮和输入框。你不能仅仅依靠关闭鼠标事件来“禁用”一个按钮。 - Air
显示剩余3条评论
72

这里是一个快速的注释，适用于不需要

标签，而只需要一个块级元素的人们。在HTML5中，<fieldset disabled="disabled"></fieldset>添加了disabled属性。在被禁用的
中的每个表单元素都将被禁用。

2
这是一个很棒的答案 - 它允许动态项在禁用状态下生成，只要它们在块元素内而不是在创建时测试禁用状态 - 并且元素确实被禁用。 - salmonmoose
3
这是最佳答案。它在语义上最正确，告诉浏览器该字段集内的所有输入都应禁用。它尊重键盘操作，不需要处理鼠标的 JS 注销。但需要注意的是，在此评论发布时，Edge 浏览器无法继承父级字段集中的禁用属性值，当父级字段集被包含在另一个字段集内时发生这种情况。 - Stephen Watkins
伟大的人，最好的解决方案总是最简单的，谢谢。 - Saghachi
如果可以的话，我想再点赞一些。这正是我所需要的！ - Aleksei
1
最佳答案在这里 ✅ - Matt Lo
显示剩余2条评论
50
我只是想提一下这个扩展方法来启用和禁用元素。我认为这比直接添加和删除属性的方式更加简洁。

然后你只需要：

$("div *").disable();
此解决方案可能会在大页面中产生副作用！（没有静态引用div容器/每个底层元素都被调用） - Martin K.
如果您正在使用asp.net，则在禁用Panel控件时会得到一个<div disabled="disabled">。这适用于IE中的子元素（即它们变为禁用状态），但不适用于其他浏览器。您可以通过将jquery禁用函数与...$("div[disabled='disabled'] :input").disable();结合使用，在Chrome / Firefox中禁用所有子表单元素。 - Stuart
19

你可以使用这个简单的CSS语句来禁用事件

#my-div {
    pointer-events:none;
}
16

将 div 标签包裹在 form 和 fieldset 标签中：

<form>
  <fieldset disabled>
    <div>your controls</div>
  </fieldset>
</form>
1
@kofifus 可能是浏览器的问题吗？fieldset 是一个标准的 HTML 标签。 - Sajithd
1
这是破损的HTML。应该用<form>标签包装起来。"<fieldset>" HTML元素用于Web表单中。- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset - tim-montague
15

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

Martin建议的jQuery方法是你可以实现这个目标的唯一可靠方式。

14

与cletu的解决方案类似，但是我在使用那个解决方案时遇到了错误，这是解决方法：


类似于cletu的解决方案，但我在使用它时出现了错误，这是一个解决方法：
$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

对我来说运行良好。

9
如果您想保持禁用的语义如下所示：
<div disabled="disabled"> Your content here </div>

您可以添加以下CSS。
div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

这里的好处是，您不需要在要处理的div上使用类。
有没有一种有条件地添加它的方法？ - leo_bouts
8

实现此目的的一种方法是将 disabled 属性添加到 div 的所有子元素中。你可以很容易地实现这一点：

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv") 找到这个 div，.find("*") 获取所有的子节点（包括多层级），然后 .prop('disabled', true) 禁用它们。

这样所有内容都被禁用了，你无法点击、切换选项卡或滚动等操作。同时，你也不需要添加任何 CSS 类。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接