How to Disable whole Div Contents without using JQuery

Question

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.

If you can do something with jQuery, you can also do it with vanilla JavaScript because (all together now) jQuery is JavaScript. — JJJ, Mar 20 '13 at 12:22
Yes, that's possible. Please show what you've tried so far... — Flauwekeul, Mar 20 '13 at 12:22
possible duplicate of: http://stackoverflow.com/questions/639815/how-to-disable-all-div-content — Ezhil V, Mar 20 '13 at 12:22
Absolutely possible to write the functionality what you want in javascript without using jquery. — viki, Mar 20 '13 at 12:24
@javapirate:He has used the JQuery to Solve. Not Duplication — , Mar 20 '13 at 12:24
iterate all the form elements inside the div tag and then disable them. Try this and let us know the result — Ezhil V, Mar 20 '13 at 12:24

score 5 · Answer 1 · answered Mar 20 '13 at 12:25

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

answered Mar 20 '13 at 12:25

Aziz Shaikh

16,245
11
62
79

1

:Can You Make it more simpler ? – Mar 20 '13 at 12:29

score 1 · Answer 2 · answered Mar 20 '13 at 12:26

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.

score 0 · Answer 3 · answered Mar 20 '13 at 12:57

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.

score 0 · Answer 4 · answered Apr 26 '16 at 11:04

0

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

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

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

answered Apr 26 '16 at 11:04

Vijayabaskar Velukumar

1
1

How to Disable whole Div Contents without using JQuery

4 Answers4