如何在不使用 JQuery 的情况下禁用整个 Div 内容答案

【问题标题】：How to Disable whole Div Contents without using JQuery如何在不使用 JQuery 的情况下禁用整个 Div 内容
【发布时间】：2016-04-26 19:04:11
【问题描述】：

因为我有 JavaScript 的基本知识，所以我想做如下操作：

通过使用两个单选按钮提供两个付款选项：
1. 现金支付
2. 通过检查
如果用户选择 Cash 的单选按钮，Check 按钮也应该禁用，并且 Check 的 Div 中的支票号码和银行名称等详细信息也应该禁用。
还有签证 Versa

有没有办法在不使用 JQuery 的情况下做到这一点？（禁用 div 并同时禁用所有内容）

在此先感谢您的帮助。

【问题讨论】：

如果你可以用 jQuery 做点什么，你也可以用 vanilla JavaScript 做，因为（现在所有）jQuery 就是 JavaScript。
可能重复：stackoverflow.com/questions/639815/…
@javapirate：他使用了 JQuery 来解决。不重复
迭代 div 标签内的所有表单元素，然后禁用它们。试试这个，让我们知道结果
@javapirate：我认为它会起作用

标签： javascript html xhtml

【解决方案1】：

试试这个：

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

要禁用 div 内的所有元素，试试这个：

var allChildNodes = document.getElementById("myDivId").getElementsByTagName('*');

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

【讨论】：

:你能让它更简单吗？

【解决方案2】：

此代码将禁用给定容器中的所有元素。

var container = document.getElementById("cashContainer");
var inputs = document.getElementsByTagName("input").concat(document.getElementsByTagName("select"));
for (var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = true;
}

应用相同的代码，您可以重新启用另一个容器。

【讨论】：

【解决方案3】：

你可以试试这个

HTML

<input type="radio" name="cashcheck" value="cash" checked />Cash<br />
<div id="cash">
    <form method="post">
        <input type="text" name="cashTxt1" />
        <input type="text" name="cashTxt2" />
    </form>
</div>

<input type="radio" name="cashcheck" value="check" />Check<br />
<div id="check">
    <form method="post">
        <input type="text" name="checkTxt1" disabled />
        <input type="text" name="checkTxt2" disabled />
    </form>
</div>

window.onload=function(){
    var radios = document.getElementsByName('cashcheck');
    radios[0].onchange=toggle;
    radios[1].onchange=toggle;
};

function toggle()
{
    if(this.checked)
    {
        var div = document.getElementById(this.value),
        inputs = div.getElementsByTagName('form')[0].getElementsByTagName('*');
        for( var i=0; i<inputs.length; i++)
        {
            inputs[i].removeAttribute('disabled');
        }

        var op = this.value == 'cash' ? 'check' : 'cash',
        divOp = document.getElementById(op),
        divOpInputs = divOp.getElementsByTagName('form')[0].getElementsByTagName('*');
        for( var i=0; i<divOpInputs.length; i++)
        {
            divOpInputs[i].setAttribute('disabled');
        }
    }
}

DEMO.

【讨论】：

【解决方案4】：

<fieldset disabled="true">
  <div>
    <input type="text" />
  </div>
  <br>

  <div>
    <input type="text" />
  </div>
  <br>

  <div>
    <input type="text" />
  </div>
  <br>
</fieldset>

【讨论】：