¿Deshabilitar / habilitar una entrada con jQuery?

$input.disabled = true;

or

$input.disabled = "disabled";

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

preguntado el 12 de septiembre de 09 a las 02:09

Me pareció que el Depende de complemento que puede resultarle útil -

19 Respuestas

jQuery 1.6+

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

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

jQuery 1.5 y menos

El .prop() la función no existe, pero .attr() hace 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 el .prop() or .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 suena mucho a removeAttr(), Pero NO DEBERÍA SER USADO en propiedades nativas como 'disabled' Extracto de la documentación:

Nota: No utilice este método para eliminar propiedades nativas como marcadas, desactivadas o seleccionadas. Esto eliminará la propiedad por completo y, una vez eliminada, no se podrá volver a agregar al elemento. Utilice .prop () para establecer estas propiedades en falso.

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.

Respondido el 25 de junio de 14 a las 21:06

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 sólo 'input'. Este último selecciona solo real elementos. - cornel mason

@CornelMasson input,textarea,select,button es un poco mejor de usar que :input -- :input como selector es bastante ineficiente porque tiene que seleccionar * luego recorra cada elemento y filtre por nombre de etiqueta; si pasa los 4 selectores de nombre de etiqueta directamente, es MUCHO más rápido. También, :input no es un selector de CSS estándar, por lo que cualquier mejora de rendimiento que sea posible querySelectorAll Esta perdido - gnarf

¿Esto solo evita que el usuario acceda a él, o realmente lo elimina de la solicitud web? - unchilldude

Usando el patrón de velas del .removeProp("disabled") estaba causando el problema de que "la propiedad se eliminaba por completo y no se agregaba nuevamente" como lo 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í. Siempre usa .prop("disabled",false) en lugar de - Sandeepan Nath

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

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');   
});

contestado el 29 de mayo de 13 a las 13:05

¡Jikes! Por qué $(document).on('event_name', '#your_id', function() {...}) en lugar de $('#your_id').on('event_name', function() {...}). Como se describe en el Documentación de jQuery .on () el primero usa la delegación y escucha todos las event_name eventos que burbujean hasta document y comprueba si coinciden #your_id. Este último escucha específicamente a $('#your_id') solo eventos y eso escala mejor. - Peter V. Morch

El primero funciona para elementos insertados en el DOM en cualquier punto, el segundo solo para los existentes en ese momento. - locomykl

@crazymykl Correcto, pero no debes agregar elementos con una identificación ya presente en tu página. - SepehrM

    // 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', '');

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

Respondido 07 Abr '14, 11:04

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

or

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

Respondido el 11 de Septiembre de 14 a las 09:09

Por supuesto, la pregunta fue para jQuery y esto está cambiando el estado en JavaScript simple, pero funciona. - basic6

Esto cambia el estado en JavaScript, pero aún usa un selector de jQuery para obtener la primera entrada. - cjsimon

Pero no creo que estemos haciendo una enciclopedia de jquery aquí, si una respuesta funciona, está bien. Sajjad Shirazy

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();

Respondido 26 Oct 14, 23:10

Si bien envolver la funcionalidad es útil, debería haber utilizado prop y no attr con disabled propiedad para que funcione correctamente (asumiendo jQuery 1.6 o superior). - Codificación ido

@TrueBlueAussie ¿Cuál es la desventaja de usar attr ? Utilizo el código anterior en algunos proyectos y, por lo que recuerdo, funciona bien. Nicu Surdu

Las excepciones obvias son los controles con propiedades detrás de escena. El más famoso es el checked propiedad de las casillas de verificación. Utilizando attr no dará el mismo resultado. - Codificación ido

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

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

Respondido el 12 de Septiembre de 14 a las 17:09

gracias tengo lo mismo por el conmutador que es; $ ("entrada"). prop ('deshabilitado', función (i, v) {return! v;}); - Flujow

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.

respondido 10 nov., 18:07

Actualización para 2018:

Ahora no hay necesidad de jQuery y ha pasado un tiempo desde document.querySelector or document.querySelectorAll (para varios elementos) hacen casi exactamente el mismo trabajo que $, más otros 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);

Respondido 11 Feb 18, 18:02

la pregunta pregunta específicamente sobre jQuery ... pero igualmente su declaración es correcta, y vale la pena saber que jQuery no necesitas para ser utilizado para esto cuando ya hay varios elementos. - ADyson

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>

Respondido 02 ago 18, 11:08

esto funciona para mi

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

Respondido 22 Feb 19, 13:02

Inhabilitar:

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

Activar:

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

Respondido el 21 de Septiembre de 18 a las 08:09

Desactivar verdadero para el tipo de entrada:

En caso de un tipo de entrada específico (Ex. Entrada de tipo de texto)

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

Para todo tipo de entrada

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

Respondido el 22 de Septiembre de 18 a las 08:09

Gracias, esto me ayudó a aislar a un nombre de entrada. $("input[name=method]").prop('disabled', true); - harry bosh

Úselo así,

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

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

contestado el 04 de mayo de 20 a las 12:05

<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>

Respondido el 26 de Septiembre de 15 a las 11:09

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

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);

respondido 16 nov., 17:10

2018, sin JQuery (ES6)

Desactivar todos input:

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

Deshabilitar input con id="my-input"

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

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

Respondido el 04 de junio de 18 a las 14:06

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

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

Respondido el 09 de enero de 20 a las 18:01

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":""})

respondido 02 mar '21, 09:03

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');

Respondido el 08 de enero de 18 a las 14:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.