Secuencia de comandos para habilitar/deshabilitar elementos de entrada?

Question

Me pregunto si es posible que un script active/deshabilite todos los elementos de entrada en la página con algún tipo de botón de alternar.

busqué en Google, pero no encontró nada demasiado útil a excepción de lo siguiente:

http://www.codetoad.com/javascript/enable_disable_form_element.asp pero no estoy seguro de cómo editarlo para la palanca.

Answer 1

Un ejemplo de trabajo:.

$().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>

Answer 2

Algo como esto funcionaría:

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

Answer 3

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

Answer 4

Aquí es una función para cambiar todas las entradas en la página:

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

Funciona mediante el uso de la (el signo de exclamación) logical NOT operator , que devuelve el opuesto del operando. Por ejemplo, !true devolverá false. Por lo tanto, al usar !inputs[n].disabled, devolverá lo contrario de lo que está configurado actualmente, por lo tanto alternarlo.

Si necesita código para enlazar el evento click al botón:

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

También puede utilizar addEventListener, pero véase la página del enlace para obtener más información, incluida la compatibilidad con Internet Explorer. El código que di más arriba debería funcionar en todos los navegadores sin problemas.

Answer 5

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

^^ Robert Nyman tiene un guión "obtener los elementos de la clase". Básicamente usted acaba de asignar todos los elementos de entrada a la misma clase, y luego hacer algo como:

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

Esta es una pieza de código que estoy usando actualmente en realidad a colapsar todo con un nombre de clase dado (se usa el script que mencioné arriba). Pero, en cualquier caso, creo que la clave de su problema es poder referirse a múltiples elementos a la vez, con los que la secuencia de comandos lo ayudará.

también el enlace en su pregunta no funcionó para mí :(