实现这一点的一种方法是将disabled道具添加到div的所有子元素中。你可以很容易地实现这一点:

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

$("#myDiv")找到div， .find("*")得到所有级别的所有子节点，.prop('disabled'， true)禁用每个子节点。

这样所有的内容都是禁用的，你不能点击它们，标签到它们，滚动它们，等等。此外，您不需要添加任何css类。

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

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

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

在jQuery中，另一种方法是获得包含DIV的内部高度、内部宽度和位置，然后简单地覆盖另一个DIV，透明的，在相同大小的上面。这将适用于容器内的所有元素，而不仅仅是输入。

记住，尽管禁用了JS，你仍然可以使用DIVs的输入/内容。上面的答案也一样。

或者只使用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');
}

这个css仅/noscript解决方案在fieldset(或div或任何其他元素)上添加了一个覆盖层，防止交互:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

如果你想要一个不可见的，即透明的覆盖，将背景设置为rgba(128,128,128,0)，因为没有背景它将不起作用。 以上操作适用于IE9+。下面这个简单得多的css可以在IE11+上运行

[disabled] { pointer-events: none; }

铬