如何禁用DIV的内容

pointer-events单独的CSS 属性不会阻止子元素滚动，并且IE10及以下版本的DIV元素（仅对于SVG）不支持该属性。 http://caniuse.com/#feat=pointer-events

在所有浏览器上禁用DIV的内容。

Javascript：

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

CSS：

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

在除IE10及以下版本的所有浏览器上禁用DIV的内容。

Javascript：

$("#myDiv").addClass("disable");

CSS：

.disable {
  // Note: pointer-events not supported by IE10 and under
  pointer-events: none;
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

如果要保留禁用的语义，如下所示

<div disabled="disabled"> Your content here </div>

您可以添加以下CSS

div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

这样做的好处是您不在要使用的div上使用类

如评论中所述，您仍然可以通过使用Tab键在元素之间导航来访问元素。所以我推荐这个：

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

我以为我会记一些笔记。

1. 可以在IE8 / 9中禁用<div>。我认为这是“错误的”，这让我失望了
2. 不要使用.removeProp（），因为它对元素具有永久影响。使用.prop（“ disabled”，false）代替
3. $（“＃myDiv”）。filter（“ input，textarea，select，button”）。prop（“ disabled”，true）更加明确，它将捕获您可能会错过的某些表单元素：input

div在fieldset标签内包装：

<fieldset disabled>
<div>your controls</div>
</fieldset>

您可以使用此简单的CSS语句来禁用事件

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

对于DIV元素，disabled属性不是W3C规范的一部分，仅对于表单元素而言。

Martin建议的jQuery方法是实现此目标的唯一简单方法。

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

然后，您只需执行以下操作：

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

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

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

的CSS

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

对于不需要div只是一个基本元素的人，这里是一个简短的评论。在HTML5中<fieldset disabled="disabled"></fieldset>获得了disable属性。禁用字段集中的每个表单元素均被禁用。