¿Deshabilitar / habilitar una entrada con jQuery?

$input.disabled = true;

o

$input.disabled = "disabled";

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

jQuery 1.6+

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

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

jQuery 1.5 y abajo

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

Establecer el atributo deshabilitado.

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

Para habilitar nuevamente, el método apropiado es usar .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 se trata de un elemento:

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

La ventaja de utilizar 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 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 se puede volver a agregar 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 accesorios booleanos se realizan de tal manera que debería establecerlos en falso en lugar de "eliminarlos" como sus contrapartes de "atributo" en 1.5

Solo por las nuevas convenciones && haciéndolo 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');   
});

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

A veces necesita deshabilitar / habilitar el elemento de formulario como input o textarea Jquery te ayuda a hacer esto fácilmente con la configuración del atributo desactivado en "desactivado". 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

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

o

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

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

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

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

Hay muchas formas de usarlos: puede 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 que se desactive. 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á utilizando 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.

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 elementos múltiples

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

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>

Inhabilitar:

$('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.

Desactivar verdadero para el tipo de entrada:

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

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

Para todo tipo de entrada

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

esto funciona para mi

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

Usé @gnarf answer y lo agregué como función

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

Luego usa así

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

2018, sin JQuery (ES6)

Deshabilitar todo input:

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

Deshabilitar inputconid="my-input"

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

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

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

txtName.disabled=1     // 0 for enable

<input id="txtName">

Usar así,

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

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

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

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