CODEWITHSUNDEEP
javascriptjquery
Charlie
Charlie

Reputation: 11787

Script to enable/disable input elements?

I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.codetoad.com/javascript/enable_disable_form_element.asp but I'm not sure how to edit it for the toggle.

Upvotes: 25

Views: 97818

Answers (5)

samccone
samccone

Reputation: 10926

A working example:

$().ready(function() {


    $('#clicker').click(function() {
        $('input').each(function() {
            if ($(this).attr('disabled')) {
                $(this).removeAttr('disabled');
            }
            else {
                $(this).attr({
                    'disabled': 'disabled'
                });
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>


<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>

Upvotes: 24

Steve
Steve

Reputation: 4695

http://code.google.com/p/getelementsbyclassname/

^^Robert Nyman has a "get elements by class" script. Basically you'd just assign all those input elements to the same class, and then do something like:

//Collapse all the nodes
function collapseNodesByClass(theClass){
  var nodes = getElementsByClassName(theClass);
  for(i = 0; i < nodes.length; i++){
    nodes[i].style.display='none';
  }
}

This is a piece of code I'm actually currently using to collapse everything with a given class name (it uses the script I mentioned above). But in any case I think the key to your problem is being able to refer to multiple elements at once, which that script will help you with.

Also the link in your question didn't work for me :(.

Upvotes: 1

Reid
Reid

Reputation: 19419

Here is a function to toggle all inputs on the page:

function toggle_inputs() {
    var inputs = document.getElementsByTagName('input');
    for (var i = inputs.length, n = 0; n < i; n++) {
        inputs[n].disabled = !inputs[n].disabled;
    }
}

It works by using the logical NOT operator (the exclamation point), which returns the opposite of the operand. For example, !true will return false. So by using !inputs[n].disabled, it will return the opposite of what it's currently set to, thereby toggling it.

If you need code to bind the click event to the button:

document.getElementById('your_button_id').onclick = toggle_inputs;

You can also use addEventListener, but see the linked page for more information, including compatibility with Internet Explorer. The code I gave above should work across all browsers with no trouble.

Upvotes: 9

Wulf
Wulf

Reputation: 3898

for (var i = 0; i < document.getElementyByTagName('input').length; i++) {
  document.getElementsByTagName('input')[i].disabled = 'disabled';
}

Upvotes: 2

Adam MacDonald
Adam MacDonald

Reputation: 1958

Something like this would work:

var inputs=document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++){
    inputs[i].disabled=true;
}

Upvotes: 28

Related Questions