texto - habilitar y deshabilitar textbox en javascript




Deshabilitar/habilitar una entrada con jQuery? (11)

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


2018, sin JQuery (ES6)

Deshabilitar todas las 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 tu información.


jQuery 1.6+

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

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

jQuery 1.5 y por debajo

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

Establecer el atributo deshabilitado.

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

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

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

En cualquier versión de jQuery.

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

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

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

Nota: En 1.6 hay un método .removeProp() que suena muy parecido a removeAttr() , pero NO DEBE USARSE en propiedades nativas como 'disabled' Extracto de la documentación:

Nota: no utilice 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. Use .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


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

Hay varias 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á utilizando jQuery 1.7 o una versión superior, use prop (), en lugar de attr (). Esto es. Así es como habilitas o inhabilitas cualquier elemento usando jQuery.


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>

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

Solo por el bien de las nuevas convenciones && y hacerlo más 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');   
});

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

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

Entonces usa asi

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

Desactivar verdadero para el tipo de entrada:

En el caso de un tipo de entrada específico (por ejemplo, entrada de tipo de texto )

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

Para todo tipo de tipo de entrada.

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

    // 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 configurando el atributo deshabilitado en "deshabilitado". 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


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




html-input