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

然后你只需做:

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

如何禁用<div/>的内容

CSS指针事件属性本身并不会禁止子元素滚动，并且对于<div/>元素，IE10及以下版本不支持它(仅针对SVG)。 http://caniuse.com/#feat=pointer-events

在所有浏览器上禁用<div/>的内容。

Jquery:

$("#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/>的内容。

Jquery:

$("#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上的类

这里有一个快速的评论给那些不需要div而只需要blockelement的人。在HTML5中<fieldset disabled="disabled"></fieldset>得到了disabled属性。禁用字段集中的每个表单元素都是禁用的。

有一些可配置的javascript库可以接收html字符串或dom元素，并去掉不需要的标签和属性。这些被称为html杀菌剂。例如:

DOMPurify 疯狂的 sanitize-html

例如，在DOMPurify中

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>

或者只使用css和一个“disabled”类。 注意:不要使用disabled属性。 不需要摆弄jQuery的开/关。 这是非常简单的，跨浏览器工作:

.disabled{
    position: relative;
}
.disabled:after{
    content: "";
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

然后，在初始化页面或切换按钮时，可以打开或关闭它

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}