javascript - How to Disable whole Div Contents without using JQuery - Stack Overflow

admin管理员组

文章数量:1293755

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

• 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

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

Thanks in Advance For Help.

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

• 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

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

Thanks in Advance For Help.

• javascript
• html
• xhtml

Share Improve this question Follow asked Mar 20, 2013 at 12:20 user2190762user2190762 8

• 4 If you can do something with jQuery, you can also do it with vanilla JavaScript because (all together now) jQuery is JavaScript. – JJJ Commented Mar 20, 2013 at 12:22
• 1 possible duplicate of: stackoverflow./questions/639815/… – Ezhil V Commented Mar 20, 2013 at 12:22
• 2 @javapirate:He has used the JQuery to Solve. Not Duplication – user2190762 Commented Mar 20, 2013 at 12:24
• 1 iterate all the form elements inside the div tag and then disable them. Try this and let us know the result – Ezhil V Commented Mar 20, 2013 at 12:24
• 1 @javapirate:I think It will Work – user2190762 Commented Mar 20, 2013 at 12:31

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 5

Try this:

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

To disable all elements inside the div, try this:

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

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

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.

You may try this

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

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.

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

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

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

本文标签： javascriptHow to Disable whole Div Contents without using JQueryStack Overflow