CSS禁用属性不禁用按钮

问题描述：

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

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

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

请建议。

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

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

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

答

检查以下问题的答案 here

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

答

我会一类设置的按钮，呼叫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 
}

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

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

答

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

答

以下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');

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

CSS禁用属性不禁用按钮

相关推荐