在Javascript中启用和禁用Div及其元素[重复]

Question

我正在寻找一种方法来启用和禁用 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;

Answer 1

您应该可以通过 jQuery 中的attr() 或prop() 函数来设置这些，如下所示：

jQuery (

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

Answer 2

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

Answer 3

以下选择所有后代元素并禁用它们：

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

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

好的，所以把上面的代码放在一个文档准备处理程序中，并设置一个适当的点击处理程序：

$(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()，因为您没有指定重新禁用元素的要求，因此大概该事件只需要处理一次。当然，如果合适，您可以将.one() 更改为.click()。