Question

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

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

TabContainer基本上是一个 AJAX TabContainer ，它呈现给div并且其ID变为 MainContent_TabContainer1

请建议。

Answer 1

我会在按钮上设置一个类，调用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
}

Answer 2

1）如果您不使用IE来运行此项目，您可以使用以下解决方案： - - 更换＆＃39; div＆＃39;使用＆＃39; fieldset＆＃39;并禁用＆＃39; fieldset＆＃39;将禁用

中的所有输入和按钮

<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中的按钮相关联

Answer 3

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

Answer 4

检查以下问题的答案 here

将div屏蔽到父div上。简单易行。

CSS禁用属性不禁用按钮

4 个答案: