在 Javascript 中启用和禁用 Div 及其元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8423812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable & Disable a Div and its elements in Javascript
提问by Emax
I am looking for a method to Enable and Disablethe div id="dcalc"and Its children.
我在寻找一种方法，启用和禁用的 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>
I want to Disable them at loading the page and then by a click i can enable them ?
我想在加载页面时禁用它们，然后通过单击我可以启用它们？
This is what i have tried
这是我尝试过的
document.getElementById("dcalc").disabled = true;
回答by Rion Williams
You should be able to set these via the attr()or prop()functions in jQuery as shown below:
您应该能够通过jQuery 中的attr()或prop()函数设置这些，如下所示：
jQuery (< 1.7):
jQuery (< 1.7):
// This will disable just the div
$("#dcacl").attr('disabled','disabled');
or
或者
// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");
jQuery (>= 1.7):
jQuery (>= 1.7)：
// This will disable just the div
$("#dcacl").prop('disabled',true);
or
或者
// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);
or
或者
// disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);
Javascript:
Javascript：
// This will disable just the div
document.getElementById("dcalc").disabled = true;
or
或者
// This will disable all the children of the div
var nodes = document.getElementById("dcalc").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
回答by Sergio Ramirez
If you want to disable all the div's controls, you can try adding a transparent div on the div to disable, you gonna make it unclickable, also use fadeTo to create a disable appearance.
如果你想禁用所有 div 的控件，你可以尝试在 div 上添加一个透明的 div 来禁用，你会使其不可点击，也可以使用淡入淡出来创建禁用外观。
try this.
尝试这个。
$('#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>');
回答by nnnnnn
The following selects all descendant elements and disables them:
以下选择所有后代元素并禁用它们：
$("#dcacl").find("*").prop("disabled", true);
But it only really makes sense to disable certain element types: inputs, buttons, etc., so you want a more specific selector:
但只有禁用某些元素类型才有意义：输入、按钮等，所以你需要一个更具体的选择器：
$("#dcac1").find(":input").prop("disabled",true);
// noting that ":input" gives you the equivalent of
$("#dcac1").find("input,select,textarea,button").prop("disabled",true);
To re-enable you just set "disabled" to false.
要重新启用，您只需将“禁用”设置为 false。
I want to Disable them at loading the page and then by a click i can enable them
我想在加载页面时禁用它们，然后通过单击我可以启用它们
OK, so put the above code in a document ready handler, and setup an appropriate click handler:
好的，所以将上面的代码放在一个文档就绪处理程序中，并设置一个适当的点击处理程序：
$(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);
}
}
I've cached the results of the selector on the assumption that you're not adding more elements to the div between the page load and the click. And I've attached the click handler with .one()since you haven't specified a requirement to re-disable the elements so presumably the event only needs to be handled once. Of course you can change the .one()to .click()if appropriate.
我已经缓存了选择器的结果，假设您没有在页面加载和点击之间向 div 添加更多元素。我已经附加了点击处理程序，.one()因为您没有指定重新禁用元素的要求，所以大概只需要处理一次事件。当然.one()，.click()如果合适，您可以更改为。
