Pregunta ¿Desactivar / habilitar una entrada con jQuery?


$input.disabled = true;

o

$input.disabled = "disabled";

¿Cuál es la forma estándar? Y, a la inversa, ¿cómo habilita una entrada deshabilitada?


1910
2017-09-12 05:21


origen


Respuestas:


jQuery 1.6+

Para cambiar el disabled propiedad debe usar el .prop() función.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 y abajo

los .prop() la función no existe, pero .attr() hace similar:

Establezca el atributo deshabilitado.

$("input").attr('disabled','disabled');

Para habilitar nuevamente, el método correcto es usar .removeAttr()

$("input").removeAttr('disabled');

En cualquier versión de jQuery

Siempre puede confiar en el objeto DOM real y es probablemente un poco más rápido que las otras dos opciones si solo se trata de un elemento:

// assuming an event handler thus 'this'
this.disabled = true;

La ventaja de usar el .prop() o .attr() métodos es que puede establecer la propiedad para un grupo de elementos seleccionados.


Nota: En 1.6 hay un .removeProp() método que se parece mucho a removeAttr(), pero NO DEBERÍA SER USADO en propiedades nativas como 'disabled'  Extracto de la documentación:

Nota: No use este método para eliminar propiedades nativas como marcadas, deshabilitadas o seleccionadas. Esto eliminará la propiedad por completo y, una vez eliminada, no podrá agregarse nuevamente al elemento. Utilice .prop () para establecer estas propiedades en falso en su lugar.

De hecho, dudo que haya muchos usos legítimos para este método, los apoyos booleanos se hacen de tal manera que se deben establecer en falso en lugar de "eliminarlos" como sus homólogos de "atributo" en 1.5.


3289
2017-09-12 05:23



Solo por el bien de las nuevas convenciones && por lo que es adaptable en el futuro (a menos que las cosas cambien drásticamente con ECMA6 (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

y

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

51
2017-07-18 11:51



    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

A veces es necesario deshabilitar / habilitar el elemento de formulario como entrada o área de texto. Jquery te ayuda a hacer esto fácilmente con el atributo de configuración desactivado en "deshabilitado". Por ej .:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Para habilitar el elemento deshabilitado, debe quitar el atributo "deshabilitado" de este elemento o vaciarlo. Por ejemplo:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

referirse:http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


25
2018-04-07 10:27



$("input")[0].disabled = true;

o

$("input")[0].disabled = false;

12
2017-09-06 14:53



Puedes poner esto en algún lugar global en tu código:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Y luego puedes escribir cosas como:

$(".myInputs").enable();
$("#otherInput").disable();

7
2017-10-18 13:42



Si solo desea invertir el estado actual (como un comportamiento de botón de alternar):

$("input").prop('disabled', ! $("input").prop('disabled') );

4
2017-09-12 16:28



Actualización para 2018:

Ahora no hay necesidad de jQuery y ha pasado un tiempo desde document.querySelector  o document.querySelectorAll (para elementos múltiples) realizan casi exactamente el mismo trabajo que $, más los más explícitos getElementById, getElementsByClassName, getElementsByTagName

Desactivar un campo de la clase "casilla de verificación de entrada"

document.querySelector('.input-checkbox').disabled = true;

o múltiples elementos

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

2
2018-02-11 18:29



Puede usar el método jQuery prop () para deshabilitar o habilitar el elemento de formulario o controlar dinámicamente mediante jQuery. El método prop () requiere jQuery 1.6 y superior.

Ejemplo:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

1
2017-08-02 10:26