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.

---

Something like this would work:

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

---

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>

---

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.

---

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

---

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 :(.