首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在Javascript中启用和禁用Div及其元素

在Javascript中启用和禁用Div及其元素
EN

Stack Overflow用户
提问于 2011-12-08 06:56:00
回答 3查看 510.5K关注 0票数 74

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

代码语言:javascript
复制
<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>

我想在加载页面时禁用它们,然后单击一下就可以启用它们?

这就是我尝试过的

代码语言:javascript
复制
document.getElementById("dcalc").disabled = true;
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-12-08 06:57:50

您应该能够通过jQuery中的attr()prop()函数设置它们,如下所示:

jQuery (< 1.7):

代码语言:javascript
复制
// This will disable just the div
$("#dcacl").attr('disabled','disabled');

代码语言:javascript
复制
// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

jQuery (>= 1.7):

代码语言:javascript
复制
// This will disable just the div
$("#dcacl").prop('disabled',true);

代码语言:javascript
复制
// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

代码语言:javascript
复制
//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

Javascript:

代码语言:javascript
复制
// This will disable just the div
document.getElementById("dcalc").disabled = true;

代码语言:javascript
复制
// 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;
}
票数 170
EN

Stack Overflow用户

发布于 2013-01-22 23:16:27

如果你想禁用所有的div控件,你可以尝试在要禁用的div上添加一个透明的div,你可以让它不可点击,也可以使用fadeTo创建一个禁用的外观。

尝尝这个。

代码语言:javascript
复制
$('#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>');
票数 56
EN

Stack Overflow用户

发布于 2011-12-08 07:02:47

以下操作将选择所有子代元素并禁用它们:

代码语言:javascript
复制
$("#dcacl").find("*").prop("disabled", true);

但只有禁用某些元素类型才有意义:输入、按钮等,因此您需要一个更具体的选择器:

代码语言:javascript
复制
$("#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即可。

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

好的,将上面的代码放在一个文档就绪的处理程序中,并设置一个适当的单击处理程序:

代码语言:javascript
复制
$(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()

票数 21
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8423812

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档