¿Deshabilitar / habilitar una entrada con jQuery?

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.

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

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

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

or

$("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 alternancia):

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

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.

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

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>

esto funciona para mi

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

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.

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

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

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

2018, sin JQuery (ES6)

Desactivar todos input:

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

Deshabilitar input id="my-input"

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

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

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

txtName.disabled=1     // 0 for enable

<input id="txtName">

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

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