2014-09-01 191 views
1

我禁用包含文本框和按钮控件的div。当文本框被禁用时,按钮不会被禁用。 下面是JavaScript代码来禁用,我在页面加载调用CSS禁用属性不禁用按钮

document.getElementById("MainContent_TabContainer1").disabled = true; 

TabContainer的基本上是一个AJAX TabContainer的,向各股利和它的ID成为MainContent_TabContainer1

请建议。

+0

您是否尝试过将pointerEvents设置为none? – J148 2014-09-01 16:57:46

+0

我有很多控件,并且为所有控件设置指针事件属性是不现实的。此外,该方案就像在我的应用程序中的用户没有登录时,我想禁用整个页面,而如果登录的东西将处于正常状态,并且所有按钮都应该是可点击的。 – user2861226 2014-09-01 17:02:37

+1

我敢肯定,你不能禁用DIV:http://www.w3.org/TR/html5/disabled-elements.html你可能需要遍历它包含的元素。 – 2014-09-01 17:04:35

回答

0

检查以下问题的答案 here

只是掩盖一个div到父DIV。简单而简单。

0

我会一类设置的按钮,呼叫getElementsByClassName方法,并遍历结果,设定每一个残疾人

我做了一个jsFiddle来证明这一点。

HTML:

<div id='hold'> 
    <button class='btn'>Click Me</button> 
    <button class='btn'>Click Me</button> 
    <button class='btn'>Click Me</button> 
    <div class='btn'>Click Me</div> 
</div> 

JS:

var buttons = document.getElementsByClassName("btn"); 
for (var x=0;x<buttons.length;x++) { 
    buttons[x].disabled = true; 
    buttons[x].style.pointerEvents = 'none'; //disables div buttons 
} 
+0

这不是一个傻瓜证明解决方案。我试了一下,它留下了一些具有onclick事件的div(用作按钮)。最好的方法是用文档掩码来掩盖它 – user2861226 2014-09-07 06:35:31

+0

哦,在这种情况下,我会使用'ele.style.pointerEvents ='none''。但是,对于他自己的 – J148 2014-09-07 20:16:44

0

1)如果你不使用IE浏览器来运行这个项目,你可以使用下面的解决方案: - - 与更换 'DIV' 'fieldset'并禁用'fieldset'将会禁用里面的所有输入和按钮

<fieldset id="parent" > 
<button class='btn' onClick="myFunction()">Click Me</button> 
<input type="text"/> 
</fieldset> 

<script> 
function myFunction() { 
document.getElementById("parent").disabled = true; 
} 

2)要禁用父DIV

<div id="parent" > 
<button class='btn' onClick="myFunction()">Click Me</button> 
<input type="text"/> 
<input type="text"/> 
</div> 

<script> 
function myFunction() { 
var myDiv = document.getElementById("parent"); 

var inputArr = myDiv.getElementsByTagName("input"); 
for (var i = 0; i < inputArr.length; i++) 
inputArr[i].disabled = true; 

var btnArr = myDiv.getElementsByTagName("button"); 
for (var i = 0; i < btnArr.length; i++) 
    btnArr[i].disabled = true; 
} 
</script> 

注内的每个输入和按钮:只是为了显示的无效,该功能被绑定到本按钮在父DIV

0

以下JavaScript代码将完成你的任务

var nod = document.getElementById("MainContent_TabContainer1").getElementsByTagName('*'); 

for (var i = 0; i < nod.length; i++) { 
    nod[i].disabled = true; 
} 

如果你想要做的jQuery这份工作,那么你可以写下面的代码

$("#MainContent_TabContainer1 *").attr("disabled", "disabled").off('click'); 
+0

它不适用于具有onclick属性和锚定标记的div。但感谢您的建议。我发现实现它的最好方法是用另一个div屏蔽父div – user2861226 2014-09-02 14:54:20