Activa o desactiva el atributo de entrada utilizando jQuery

Aquí está mi código:

$("#product1 :checkbox").click(function(){ $(this) .closest('tr') // Find the parent row. .find(":input[type='text']") // Find text elements in that row. .attr('disabled',false).toggleClass('disabled') // Enable them. .end() // Go back to the row. .siblings() // Get its siblings .find(":input[type='text']") // Find text elements in those rows. .attr('disabled',true).removeClass('disabled'); // Disable them. }); 

¿Cómo puedo alternar .attr('disabled',false); ?

Parece que no puedo encontrarlo en Google.

 $('#el').prop('disabled', function(i, v) { return !v; }); 

El método .prop() acepta dos argumentos:

  • Nombre de la propiedad (desactivado, marcado, seleccionado) cualquier cosa que sea verdadera o falsa
  • Valor de propiedad, puede ser:
    • ( vacío ) – devuelve el valor actual.
    • boolean (verdadero / falso): establece el valor de la propiedad.
    • función – Se ejecuta para cada elemento encontrado, el valor devuelto se usa para establecer la propiedad. Hay dos argumentos pasados; el primer argumento es el índice (0, 1, 2, aumenta para cada elemento encontrado). El segundo argumento es el valor actual del elemento (verdadero / falso).

Entonces, en este caso, utilicé una función que me proporcionó el índice (i) y el valor actual (v), luego devolví el valor opuesto al actual, por lo que el estado de propiedad se invierte.

¡ Supongo que para obtener la comparabilidad completa del navegador disabled debe establecerse por el valor disabled o eliminarse!
Aquí hay un pequeño complemento que acabo de hacer:

 (function($) { $.fn.toggleDisabled = function() { return this.each(function() { var $this = $(this); if ($this.attr('disabled')) $this.removeAttr('disabled'); else $this.attr('disabled', 'disabled'); }); }; })(jQuery); 

Enlace de ejemplo .

EDIT: ¡actualizó el enlace / código de ejemplo para mantener la capacidad de ser utilizado!
EDICION 2:
Según el comentario de @lonesomeday, aquí hay una versión mejorada:

 (function($) { $.fn.toggleDisabled = function(){ return this.each(function(){ this.disabled = !this.disabled; }); }; })(jQuery); 

     $ ('# checkbox'). click (función () {
         $ ('# submit'). attr ('disabled',! $ (this) .attr ('checked'));
     });

Mucho tiempo después, y gracias a @arne, creé esta pequeña función similar para manejar donde la entrada debe ser deshabilitada Y oculta, o habilitada Y mostrada:

 function toggleInputState(el, on) { // 'on' = true(visible) or false(hidden) // If a field is to be shown, enable it; if hidden, disable it. // Disabling will prevent the field's value from being submitted $(el).prop('disabled', !on).toggle(on); } 

Entonces un objeto jQuery (como $ (‘input [name = “something”]’)) simplemente se cambia usando:

 toggleInputState(myElement, myBoolean) 

Esto es bastante simple con la syntax de callback de attr :

 $("#product1 :checkbox").click(function(){ $(this) .closest('tr') // find the parent row .find(":input[type='text']") // find text elements in that row .attr('disabled',function(idx, oldAttr) { return !oldAttr; // invert disabled value }) .toggleClass('disabled') // enable them .end() // go back to the row .siblings() // get its siblings .find(":input[type='text']") // find text elements in those rows .attr('disabled',function(idx, oldAttr) { return !oldAttr; // invert disabled value }) .removeClass('disabled'); // disable them }); 

Otra opción simple que se actualiza con un clic en la checkbox.

HTML:

  

jQuery:

 $('#checkbox').click(function() { if (this.checked) { $('#item').prop('disabled', false); // If checked enable item } else { $('#item').prop('disabled', true); // If checked disable item } }); 

En acción: enlace

    Intereting Posts