在 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>

我想禁用他们在加载页面，然后通过点击我可以启用他们？

这是我试过的方法

document.getElementById("dcalc").disabled = true;
546469 次浏览
小开
最佳答案

您应该能够通过 jQuery 中的 attr()或 prop()函数设置这些值，如下所示:

JQuery (< 1.7) :

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

或者

// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

JQuery (> = 1.7) :

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

或者

// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

或者

//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

Javascript:

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

或者

// 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;
}
小开

下面选择所有子元素并禁用它们:

$("#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);

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

我想禁用他们在加载页面，然后通过点击我可以启用他们

好的，那么把上面的代码放到一个文档就绪处理程序中，然后设置一个适当的 click 处理程序:

$(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 添加更多元素。我已经用 .one()附加了 click 处理程序，因为您还没有指定重新禁用元素的要求，所以推测事件只需要处理一次。当然，如果适当的话，您可以将 .one()改为 .click()。

小开

如果你想禁用所有的 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>');

提交答案