如何禁用DIV元素和里面的一切[重复]答案

【问题标题】：how to disable DIV element and everything inside [duplicate]如何禁用DIV元素和里面的一切[重复]
【发布时间】：2013-03-21 18:26:47
【问题描述】：

我需要使用 Javascript 禁用 DIV 及其所有内容。我可以发誓，做一个简单的

<div disabled="true">

以前为我工作，但由于某种原因它不再工作。我不明白为什么。

在 IE10 中：文本“单击我”未灰显，单击处理程序仍然有效。

我实际上需要这个为 IE10 工作。下面是我的代码。

<html>
    <script>
         function disableTest(){

            document.getElementById("test").disabled = true;
            var nodes = document.getElementById("test").getElementsByTagName('*');
            for(var i = 0; i < nodes.length; i++){
                nodes[i].disabled = true;
            }

         }


     </script>

<body onload="disableTest();">
   <div id="test">
       <div onclick="alert('hello');">
           Click Me
       </div>
   </div>

</body>
</html>

【问题讨论】：

我只是想禁用 DIV 中的所有内容及其处理程序。
不！不能禁用 div。只有表单和表单元素。
"true" 不是 disabled 属性（在标记中）的有效值
实际上在 Quirks 模式下 IE 可以禁用 div，但它只会使按钮文本变灰，不会阻止事件触发。
并建议，在非表单元素中使用data-dissabled 处理此类内容

标签： javascript jquery html css

【解决方案1】：

以下css语句禁用点击事件

pointer-events:none;

【讨论】：

确实不错，但今天有些不支持：caniuse.com/pointer-events
+10，StackOverflow 永远不会让我失望。不要介意过时的 IE 用户，我警告他们总是升级他们的浏览器。
不幸的是，您仍然可以使用 Tab 键在元素之间导航（一旦导航到某个元素，您也可以对其进行编辑）。
表单字段上的标准disabled 属性处理所有形式的输入，而不仅仅是鼠标。这只解决了禁用鼠标输入的问题。
正如@RoyTinker 所说，这不会影响表单元素。无论您将 pointer-events: none 添加到您的 div 中的任何逻辑，还让该“禁用”的 div 中的所有表单元素也具有 disabled=true 属性。

【解决方案2】：

试试这个！

$("#test *").attr("disabled", "disabled").off('click');

我没有看到您在上面使用 jquery，但您已将其列为标签。

【讨论】：

disabled 不是 div 的有效属性。
.prop("disabled", true) 会更好（如果它可以工作的话）
啊，您应该在原始帖子中指定。在你的css中创建一个.disabled类，设置color: grey;和background-color: rgb(0, 0, 0, .2);并添加类$("#test").addClass("disabled");
@MaxStrater 它不会打开旧的点击绑定
以及如何再次启用？

【解决方案3】：

纯 javascript 没有 jQuery

function sah() {
		$("#div2").attr("disabled", "disabled").off('click');
		var x1=$("#div2").hasClass("disabledDiv");
		
		(x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
  sah1(document.getElementById("div1"));

}

    function sah1(el) {
        try {
            el.disabled = el.disabled ? false : true;
        } catch (E) {}
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                sah1(el.childNodes[x]);
            }
        }
    }

#div2{
  padding:5px 10px;
  background-color:#777;
  width:150px;
  margin-bottom:20px;
}
.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
        <div id="div2" onclick="alert('Hello')">Click me</div>
        <input type="text" value="SAH Computer" />
        <br />
        <input type="button" value="SAH Computer" />
        <br />
        <input type="radio" name="sex" value="Male" />Male
        <Br />
        <input type="radio" name="sex" value="Female" />Female
        <Br />
    </div>
    <Br />
    <Br />
    <input type="button" value="Click" onclick="sah()" />

【讨论】：

'disabled' 对 div 不起作用
在 Chrome、Mozilla 和 IE 中工作正常。刚刚检查。你会复制粘贴上面的例子并检查它吗？
@MandeepJain，为方便起见，我将代码添加到 sn-p。在 sn-p 上运行。
感谢您回复这篇旧帖。但是，只能禁用表单和表单元素。您的代码会禁用所有输入元素，但不会禁用 div 本身。
@MandeepJain 我想你想禁用 div 点击事件对吧？检查上面的代码。现在根据您的要求禁用整个 div。告诉我它是否适合你。

【解决方案4】：

我认为内联脚本很难停止，你可以试试这个：

<div id="test">
    <div>Click Me</div>
</div>

和脚本：

$(function () {
    $('#test').children().click(function(){
      alert('hello');
    });
    $('#test').children().off('click');
});

CHEKOUT FIDDLE AND SEE IT HELPS