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

How to Disable whole Div Contents without using JQuery

提问by Vijayabaskar Velukumar

As I have Basic knowledge of JavaScript I want to do operation like following :

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

• By using Two radio button giving two option for Payment :

  1. By Cash
  2. By Check

• If user select the radio button of Cash the Cheque Button should also disable and the Div of Cheque in which the details like cheque no and bank name is should also disable.

• And visa Versa

• 通过使用两个单选按钮提供两个付款选项：

  1. 用现金
  2. 支票

• 如果用户选择现金的单选按钮，支票按钮也应该禁用，并且支票的 Div 也应该禁用支票号码和银行名称等详细信息。

• 和签证相反

Is there a way to do that without using JQuery? (disable a div and get all content disabled also)

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

Thanks in Advance For Help.

在此先感谢您的帮助。

回答by Aziz Shaikh

Try this:

试试这个：

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

To disable all elements inside the div, try this:

要禁用 div 中的所有元素，请尝试以下操作：

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

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

回答by Kna?is

This code will disable all elements within the given container.

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

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;
}

Applying the same code you can re-enable the other container.

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

回答by The Alpha

You may try this

你可以试试这个

HTML

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>

JS

JS

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.

演示。

回答by Vijayabaskar Velukumar

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

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

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