javascript - formulario - Deshabilitar/habilitar una entrada con jQuery?

habilitar y deshabilitar select javascript

Question

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

Answer 1

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.

Answer 2

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

Answer 3

Actualización para 2018:

Ahora no hay necesidad de jQuery y ha pasado un tiempo desde que document.querySelector o 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 "casilla de entrada"

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

o elementos múltiples

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

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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>

Answer 8

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

Answer 9

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

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

Answer 10

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

Answer 11

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

Answer 12

Utilizar de esta manera,

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

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

Answer 13

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

Answer 14

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

Answer 15

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

o

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

Answer 16

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