¿Deshabilitar / habilitar una entrada con jQuery?

2405
$input.disabled = true;

o

$input.disabled = "disabled";

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

2
3960

jQuery 1.6+

Para cambiar la disabledpropiedad debes usar la .prop()función.

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

jQuery 1.5 y por debajo

La .prop()función no existe, pero .attr()es similar:

Establezca el atributo deshabilitado.

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

Para volver a habilitarlo, el método adecuado es utilizar .removeAttr()

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

En cualquier versión de jQuery

Siempre puede confiar en el objeto DOM real y probablemente sea un poco más rápido que las otras dos opciones si solo está tratando con un elemento:

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

La ventaja de usar los métodos .prop()o .attr()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 removeAttr(), pero NO DEBE UTILIZARSE en propiedades nativas como 'disabled' Extracto de la documentación:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

De hecho, dudo que haya muchos usos legítimos para este método, los accesorios booleanos se realizan de tal manera que debe establecerlos en falso en lugar de "eliminarlos" como sus contrapartes de "atributo" en 1.5.

13
  • 9
    Como acotación al margen, recuerde que, si desea deshabilitar TODOS los controles de entrada de formulario, incl. casillas de verificación, radios, áreas de texto, etc., debe seleccionar ':input', no solo 'input'. Este último selecciona solo elementos <input> reales. Cornel Masson 16 de agosto de 2012 a las 8:10
  • 35
    @CornelMasson input,textarea,select,buttones un poco mejor de usar que :input, :inputya que un selector es bastante ineficiente porque tiene que seleccionar, *luego recorrer cada elemento y filtrar por nombre de etiqueta, si pasa los 4 selectores de nombre de etiqueta directamente, es MUCHO más rápido. Además, :inputno es un selector de CSS estándar, por lo que querySelectorAllse pierde cualquier mejora de rendimiento que sea posiblegnarf 16/09/12 a las 7:01
  • 3
    ¿Esto solo evita que el usuario acceda a él, o realmente lo elimina de la solicitud web? OneChillDude 2 de mayo de 2013 a las 15:45
  • 4
    El uso de .removeProp("disabled")estaba causando el problema de que "la propiedad se eliminaba por completo y no se agregaba de nuevo", como señaló @ThomasDavidBaker, en el caso de algunos navegadores como Chrome, mientras que funcionaba bien en algunos como Firefox. Realmente deberíamos tener cuidado aquí. Utilice siempre en su .prop("disabled",false)lugarSandeepan Nath 25 de junio de 2014 a las 8:08
  • 6
    Ni .prop ni .attr son suficientes para deshabilitar elementos de anclaje; .prop ni siquiera atenuará el 'control' (.attr lo hace, pero el href todavía está activo). También debe agregar un controlador de eventos de clic que llame a preventDefault (). Jeff Lowery 25 de septiembre de 2014 a las 18:50
64

Solo por el bien de las nuevas convenciones && hacerlo 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');   
});
3
  • 12
    ¡Jikes! Por qué en $(document).on('event_name', '#your_id', function() {...})lugar de $('#your_id').on('event_name', function() {...}). Como se describe en la documentación de jQuery .on (), el primero usa la delegación y escucha todos los event_name eventos que surgen documenty los comprueba para ver si coinciden #your_id. Este último escucha específicamente $('#your_id')solo eventos y eso escala mejor. Peter V. Mørch 31/07/2013 a las 20:09
  • 26
    El primero funciona para elementos insertados en el DOM en cualquier punto, el segundo solo para los existentes en ese momento. crazymykl 10/10/2013 a las 16:56
  • 1
    @crazymykl Correcto, pero no debes agregar elementos con una identificación ya presente en tu página. SepehrM 7/04/2016 a las 13:46
38
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

A veces es necesario deshabilitar / habilitar el elemento de formulario como input o textarea. Jquery te ayuda a hacer esto fácilmente configurando el atributo disabled en "disabled". Por ejemplo:

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

Para habilitar el elemento deshabilitado, debe eliminar el atributo "deshabilitado" de este elemento o vaciar su cadena. Por ejemplo:

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

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

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

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

o

$("input")[0].disabled = false;
3
  • 2
    Por supuesto, la pregunta se hizo para jQuery y esto está cambiando el estado en JavaScript simple, pero funciona. basic6 21/10/2014 a las 15:16
  • 1
    Esto cambia el estado en JavaScript, pero aún usa un selector de jQuery para obtener la primera entrada. cjsimon 1 de mayo de 2018 a las 21:41
  • 4
    Pero no creo que estemos haciendo una enciclopedia de jquery aquí, si una respuesta funciona, está bienSajjad Shirazy 2 de mayo de 2018 a las 6:48
9

Puede poner esto en algún lugar global en su 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();
3
  • 3
    Si bien ajustar la funcionalidad es útil, debería haberlo utilizado propy no attr con la disabledpropiedad para que funcione correctamente (asumiendo jQuery 1.6 o superior). Gone Coding 20 de mayo de 2015 a las 12:54
  • 1
    @TrueBlueAussie ¿Cuál es la desventaja de usar attr? Utilizo el código anterior en algunos proyectos y, por lo que recuerdo, funciona bienNicu Surdu 20 de mayo de 2015 a las 14:56
  • 1
    Las excepciones obvias son los controles con propiedades detrás de escena. El más famoso es checkedpropiedad de las casillas de verificación. El uso attrno dará el mismo resultado. Gone Coding 20 de mayo de 2015 a las 14:58
8

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

$("input").prop('disabled', ! $("input").prop('disabled') );
1
  • 1
    gracias tengo lo mismo por el conmutador que es; $ ("entrada"). prop ('deshabilitado', función (i, v) {return! v;}); Floww 30 abr.20 a las 9:31
5

Hay muchas formas de usarlos para habilitar / deshabilitar cualquier elemento :

Enfoque 1

$("#txtName").attr("disabled", true);

Enfoque 2

$("#txtName").attr("disabled", "disabled");

Si está utilizando jQuery 1.7 o una versión superior, use prop (), en lugar de attr ().

$("#txtName").prop("disabled", "disabled");

Si desea habilitar cualquier elemento, solo tiene que hacer lo contrario de lo que hizo para desactivarlo. Sin embargo, jQuery proporciona otra forma de eliminar cualquier atributo.

Enfoque 1

$("#txtName").attr("disabled", false);

Enfoque 2

$("#txtName").attr("disabled", "");

Enfoque 3

$("#txtName").removeAttr("disabled");

Nuevamente, si está usando jQuery 1.7 o una versión superior, use prop (), en lugar de attr (). Esto es. Así es como habilita o deshabilita cualquier elemento usando jQuery.

2

Actualización para 2018:

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

Deshabilitar un campo de la clase "input-checkbox"

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

o varios elementos

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
1
  • 1
    la pregunta pregunta específicamente sobre jQuery ... pero igualmente su declaración es correcta, y vale la pena saber que jQuery no necesita usarse para esto cuando ya hay varios elementos. ADyson 1 mar 18 a las 21:33
2

Puede usar el método jQuery prop () para deshabilitar o habilitar el elemento de formulario o controlar dinámicamente usando 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>
0
2

esto funciona para mi

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
1

Desactivar:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Habilitar:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
1

Desactivar verdadero para el tipo de entrada:

In case of a specific input type (Ex. Text type input)

$("input[type=text]").attr('disabled', true);

For all type of input type

$("input").attr('disabled', true);
1
  • 1
    Gracias, esto me ayudó a aislar a un nombre de entrada. $("input[name=method]").prop('disabled', true);Harry Bosh 24/04/19 a las 9:30
1

Úselo así,

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );
0
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>
1
  • 1
    De la cola de revisión : ¿Puedo solicitarle que agregue un poco más de contexto en torno a su respuesta? Las respuestas de solo código son difíciles de entender. Ayudará tanto al autor de la pregunta como a los futuros lectores si puede agregar más información en su publicación. RBT 11 de mayo de 2017 a las 1:41
0

Usé la respuesta @gnarf y la agregué como función

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Entonces usa así

$('#myElement').disable(true);
0

2018, sin JQuery (ES6)

Desactivar todo input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Desactivar inputconid="my-input"

document.getElementById('my-input').disabled = true;

La pregunta es con JQuery, es solo para su información.

0

Enfoque 4 (esta es una extensión de la respuesta del codificador salvaje )

txtName.disabled=1     // 0 for enable
<input id="txtName">
0

Una forma alternativa de deshabilitar el campo de entrada es usando jQuery y css de esta manera:

jQuery("#inputFieldId").css({"pointer-events":"none"})

y para habilitar la misma entrada el código es el siguiente:

jQuery("#inputFieldId").css({"pointer-events":""})
-1

En jQuery Mobile:

Para deshabilitar

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

Para habilitar

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');