启用&；在Javascript中禁用Div及其元素

我正在寻找一种方法来启用和禁用 div id=“dcalc”及其子项

<div id="dcalc" class="nerkheArz"
 style="left: 50px; top: 150px; width: 380px; height: 370px;
 background: #CDF; text-align: center" >
 <div class="nerkh-Arz"></div>
 <div id="calc"> </div>
</div>

---

您应该能够通过jQuery中的or函数设置这些，如下所示：

jQuery（<1.7）：

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

// This will disable just the div
$("#dcacl").prop('disabled',true);

// This will disable just the div
document.getElementById("dcalc").disabled = true;

或

jQuery（>=1.7）：

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

// This will disable just the div
$("#dcacl").prop('disabled',true);

// This will disable just the div
document.getElementById("dcalc").disabled = true;

或

或

Javascript:

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

// This will disable just the div
$("#dcacl").prop('disabled',true);

// This will disable just the div
document.getElementById("dcalc").disabled = true;

或

//这将禁用div的所有子级
var nodes=document.getElementById（“dcalc”）.getElementsByTagName（'*'）；
对于（var i=0；i

以下选项选择并禁用所有子元素：

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

但禁用某些元素类型（输入、按钮等）才真正有意义，因此您需要一个更具体的选择器：

$("#dcac1").find(":input").prop("disabled",true);
// noting that ":input" gives you the equivalent of
$("#dcac1").find("input,select,textarea,button").prop("disabled",true);

要重新启用，只需将“disabled”设置为false

我想在加载页面时禁用它们，然后单击即可启用它们

好的，将上述代码放入一个文档就绪处理程序中，并设置一个适当的单击处理程序：

$(document).ready(function() {
    var $dcac1kids = $("#dcac1").find(":input");
    $dcac1kids.prop("disabled",true);

    // not sure what you want to click on to re-enable
    $("selector for whatever you want to click").one("click",function() {
       $dcac1kids.prop("disabled",false);
    }
}

---

我缓存了选择器的结果，假设在页面加载和单击之间没有向div添加更多元素。我已经附加了click处理程序，因为您没有指定重新禁用元素的要求，所以事件大概只需要处理一次。当然，您可以将

.one（）

更改为

。如果合适，请单击（）

。

如果要禁用所有div的控件，可以尝试在div上添加一个透明div以禁用，您可以使其不可单击，还可以使用fadeTo创建禁用外观

试试这个

$('#DisableDiv').fadeTo('slow',.6);
$('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

$（'DisableDiv'）.fadeTo（'slow'，.6）；
$（'#DisableDiv'）。追加（''）；

div元素“启用”和“禁用”之间有什么区别？它实际上只是可以禁用的

输入

元素。或者您想禁用

div中的所有子
输入
元素

？我想禁用主div下的每个div请访问：

。prop（'disabled'，true）

会更好。您的最后一个代码块泄漏了一个全局变量（您需要

var i

）。如果您已经在使用JQuery，那么我建议您使用它。但是，如果您不熟悉，Javascript解决方案将更容易实现。因为你只需要把它们包在一个块里。（这类事情是jQuery真正擅长的）它不起作用。我仍然可以点击儿童链接。我也是，它不起作用。我仍然可以单击children链接，

$el.children（）否则，答案很好。我想把它加载到页面上？这可能是jquery吗？我回答中的最后一段代码是在页面加载时执行的（好吧，在DocumentReady上，这是一个更好的选择），它是通过jquery执行的-这不是你想要的吗？它不工作了？有趣的。。。您的答案在使用
children（）
时有效：为什么？我确实在Chrome开发工具中看到它正确地选择了子元素，但它们根本不会被禁用。@LenielMacaferi-如果您在jsfiddle.net上创建html或演示，我不知道您是否看到了html或演示。但是在一般意义上，
.children（）
只选择直接的子元素，这就是为什么我的答案使用
.find（）
来获取所有匹配的子元素。您需要选择表单元素，禁用div实际上没有意义。将其与抑制键盘和复制/粘贴事件结合使用：
var stopPropFn=function（e）{e.stopPropagation（）；e.preventDefault（）；}$（“#DisableDiv”）.bind（“keydown”，stopPropFn）$（“#DisableDiv”）.bind（“按键”，stopPropFn）$（“#DisableDiv”）.bind（“粘贴”，stopPropFn）这不会阻止用户使用“tab”键访问链接或输入，在那里他们仍然可以与之交互。您应该为屏蔽分区提供一个ID，以便在您想要重新启用分区时删除它。如何撤消它？我希望它像一个开关。@oliver给被附加的div一个id，比如“overlay”。然后，当您想要删除时，只需使用$（“#overlay”）.remove（）；