Alternar atributo de entrada deshabilitado usando 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 alterno .attr('disabled',false);?
Parece que no puedo encontrarlo en Google.
$('#el').prop('disabled', (i, v) => !v);
El .prop()método obtiene el valor de una propiedad para el primer elemento del conjunto de elementos coincidentes.
Argumentos
- Propiedad
name(p. ej.disabled,checked,selected) cualquier cosa que pueda ser verdadera o falsa - Propiedad
value, puede ser:(empty)devuelve el valor actual.booleanestablece el valor de la propiedad.
functionSe llama para cada elemento coincidente, el valor devuelto se utiliza para establecer la propiedad. Se pasan dos argumentos; el primer argumento es el índice (el número, comenzando con 0, 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 opuesto del valor actual, por lo que el estado de la propiedad se invierte.
Información adicional
El .prop()método obtiene el valor de propiedad solo para el primer elemento del conjunto coincidente. Devuelve indefinido para el valor de una propiedad que no se ha establecido o si el conjunto coincidente no tiene elementos. Para obtener el valor de cada elemento individualmente, utilice una construcción de bucle como el método .each()o de jQuery .map().
Atributos versus propiedades
La diferencia entre atributos y propiedades puede ser importante en situaciones específicas. Antes de jQuery 1.6, el .attr()método a veces tenía en cuenta los valores de las propiedades al recuperar algunos atributos, lo que podía provocar un comportamiento inconsistente. A partir de jQuery 1.6, el .prop()método proporciona una manera de recuperar explícitamente valores de propiedades, mientras .attr()recupera atributos.
¡ Supongo que para obtener una comparabilidad completa del navegador disableddebería establecerse por el valor disabledo eliminarse!
Aquí hay un pequeño complemento que acabo de crear:
(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 .
EDITAR: ¡actualizó el enlace/código de ejemplo para mantener la capacidad de cadena!
EDITAR 2:
Basado en el comentario de @lonesomeday, aquí hay una versión mejorada:
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#casilla de verificación').hacer clic(función(){
$('#submit').attr('disabled', !$(this).attr('checked'));
});
Otra opción sencilla que se actualiza con solo hacer clic en la casilla de verificación.
HTML:
<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>
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