jQuery deshabilitar / habilitar el botón enviar


811

Tengo este HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

¿Cómo puedo hacer algo como esto?

  • Cuando el campo de texto está vacío, el envío debe estar deshabilitado (disabled = "disabled").
  • Cuando se escribe algo en el campo de texto para eliminar el atributo deshabilitado.
  • Si el campo de texto vuelve a estar vacío (el texto se elimina), el botón de envío debe volver a desactivarse.

Intenté algo como esto:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

... pero no funciona. ¿Algunas ideas?


2
No use removeAttr ('deshabilitado') de esta manera. Use prop () para alternar el estado. Vea mi respuesta o la documentación oficial .
basic6

Respuestas:


1195

El problema es que el evento de cambio se dispara solo cuando el foco se aleja de la entrada (por ejemplo, alguien hace clic en la entrada o las pestañas). Intente usar keyup en su lugar:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

2
ok, pero el problema es que cuando elimino la última letra, tengo que presionar incluso una vez más para capturar el valor vacío y deshabilitar mi botón, porque cuando presiono la tecla de retroceso para eliminar la última letra, mi campo todavía está lleno, así que presiono mi tecla se captura y luego se elimina la carta. entonces ... ¿cómo debo hacerlo bien?
kmunky

1
Oh, mis disculpas por no probar el código primero. Si reemplaza la pulsación de tecla con keyup, ¿eso ayuda?
Eric Palakovich Carr

44
¿Qué sucede si cambia el valor del campo sin usar el teclado?
Nathan

1
Esto funciona, pero parece omitir el CSS. Por ejemplo, llamando a $ ("# loginButton"). Button (); on input id="loginButton" type="submit" name="Submit" value="Login" disabled>mostrará un botón deshabilitado con las clases css deshabilitadas.
Gaʀʀʏ

39
El método prop ('disabled', verdadero) debe usarse sobre el método attr ('disabled', 'disabled'); ver los documentos en prop ()
Martin

129
$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

44
¡ya funciona! pero ... aunque una pregunta ... ¿puede explicar esto: $ (": texto"). pulsación de tecla (check_submit) .each (function () {check_submit ();}); gracias
kmunky

1
El problema con este es que el evento de pulsación de tecla de jQuery no se dispara constantemente cuando se presionan las teclas de retroceso o eliminación. Esto significa que el usuario puede retroceder el texto y no se llamará a la función, que es un error de UX. Estoy viendo el keyup como el medio que la mayoría de la gente está usando. No me gusta del todo; Quiero que los comentarios sucedan en el keydown pero es un poco difícil de lograr.
BobRodes

79

Esta pregunta tiene 2 años, pero sigue siendo una buena pregunta y fue el primer resultado de Google ... pero todas las respuestas existentes recomiendan configurar y eliminar el atributo HTML (removeAttr ("disabled")) "disabled", que no es El enfoque correcto. Hay mucha confusión con respecto al atributo frente a la propiedad.

HTML

El "deshabilitado" en <input type="button" disabled>el marcado se denomina atributo booleano por el W3C .

HTML contra DOM

Citar:

Una propiedad está en el DOM; un atributo está en el HTML que se analiza en el DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Relacionado:

Sin embargo, el concepto más importante para recordar sobre el atributo marcado es que no corresponde a la propiedad marcada. El atributo en realidad corresponde a la propiedad defaultChecked y debe usarse solo para establecer el valor inicial de la casilla de verificación. El valor del atributo marcado no cambia con el estado de la casilla de verificación, mientras que la propiedad marcada sí. Por lo tanto, la forma compatible con varios navegadores para determinar si una casilla de verificación está marcada es usar la propiedad ...

Pertinente:

Las propiedades generalmente afectan el estado dinámico de un elemento DOM sin cambiar el atributo HTML serializado. Los ejemplos incluyen la propiedad de valor de los elementos de entrada, la propiedad deshabilitada de las entradas y los botones, o la propiedad marcada de una casilla de verificación. El método .prop () debe usarse para establecer deshabilitado y marcado en lugar del método .attr ().

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

Resumen

Para cambiar las [...] propiedades DOM, como el estado [...] deshabilitado de los elementos de formulario, use el método .prop () .

( http://api.jquery.com/attr/ )


En cuanto a la desactivación al cambiar parte de la pregunta: hay un evento llamado "entrada", pero el soporte del navegador es limitado y no es un evento jQuery, por lo que jQuery no lo hará funcionar. El evento de cambio funciona de manera confiable, pero se dispara cuando el elemento pierde el foco. Por lo tanto, uno podría combinar los dos (algunas personas también escuchan keyup y pegar).

Aquí hay un fragmento de código no probado para mostrar lo que quiero decir:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

1
Gracias por esa información, pero en realidad no dice si usar el atributo causará un problema, por ejemplo, pérdida de compatibilidad entre navegadores. ¿Usar el atributo realmente causa un problema?
ChrisJJ

Voté a favor, pero también me interesaría conocer casos específicos en los que cambiar el atributo genera problemas, como mencionó @ChrisJJ.
Armfoot

40

Para eliminar el uso del atributo deshabilitado,

 $("#elementID").removeAttr('disabled');

y para agregar el uso de atributos deshabilitados,

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

Disfruta :)


35

o para nosotros que no nos gusta usar jQ para cada pequeña cosa:

document.getElementById("submitButtonId").disabled = true;

55
Es genial que seas vegetariano en Javascript y todo, pero esto en realidad no responde la pregunta en absoluto .
Michelle

66
Esta respuesta obteniendo 25 votos positivos explica mucho código de mierda que hay en todo el mundo: /
o0 '.

26

Eric, su código no parecía funcionar para mí cuando el usuario ingresa el texto y luego elimina todo el texto. Creé otra versión si alguien experimentó el mismo problema. aquí van amigos:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

14

Funcionará así:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Asegúrese de que haya un atributo 'deshabilitado' en su HTML


12

Aquí está la solución para el campo de entrada de archivo .

Para deshabilitar un botón de envío para el campo de archivo cuando no se elige un archivo, habilítelo después de que el usuario elija un archivo para cargar:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

HTML:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

11

También puedes usar algo como esto:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

Aquí está el ejemplo en vivo


Este es el que me funciona. Probé los anteriores pero hubo algún problema con ellos. Gracias Sonu!
Geeocode

10

Para iniciar sesión en el formulario:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

8

Si el botón es un botón con estilo jQuery (con .button ()), deberá actualizar el estado del botón para que las clases correctas se agreguen / eliminen una vez que haya eliminado / agregado el atributo deshabilitado.

$( ".selector" ).button( "refresh" );

3
@The_Black_Smurf Lo agregué en caso de que ayude a alguien en el futuro, ¿cuál es el daño en eso?
Tom Chamberlain

Guau. Es triste escuchar que la actualización automática de jQuery no funciona aquí. ¡Gracias!
ChrisJJ

7

Las respuestas anteriores no abordan también la comprobación de eventos de cortar / pegar basados ​​en menús. Debajo está el código que uso para hacer ambas cosas. Tenga en cuenta que la acción realmente ocurre con un tiempo de espera porque los eventos de corte y pasado realmente se disparan antes de que ocurra el cambio, por lo que el tiempo de espera le da un poco de tiempo para que eso suceda.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

6

Vanilla JS Solution. Funciona para un formulario completo, no solo para una entrada.

En cuestión etiqueta JavaScript seleccionada.

Formulario HTML:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })
<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

Alguna explicación:

En este código agregamos evento keyup en forma html y en cada pulsación de tecla verificamos todos los campos de entrada. Si al menos un campo de entrada que tenemos está vacío o contiene solo caracteres de espacio, entonces asignamos el valor verdadero a la variable deshabilitada y deshabilitamos el botón de envío.

Si necesita deshabilitar el botón Enviar hasta que se completen todos los campos de entrada requeridos, reemplace:

inputs.forEach(function(input, index) {

con:

required_inputs.forEach(function(input, index) {

donde required_inputs ya se ha declarado matriz que contiene solo los campos de entrada obligatorios.


6

Simplemente podemos tener si y más. Si se supone que su entrada está vacía, podemos tener

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

de lo contrario podemos cambiar falso a verdadero


4

Inhabilitar: $('input[type="submit"]').prop('disabled', true);

Habilitar: $('input[type="submit"]').removeAttr('disabled');

El código de habilitación anterior es más preciso que:

$('input[type="submit"]').removeAttr('disabled');

Puedes usar ambos métodos.


para habilitar solo use .prop ('disabled', false);
rahim.nagori

2

Tuve que trabajar un poco para que esto se adaptara a mi caso de uso.

Tengo un formulario donde todos los campos deben tener un valor antes de enviar.

Esto es lo que hice:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Gracias a todos por sus respuestas aquí.


2

Consulte el siguiente código para habilitar o deshabilitar el botón Enviar

Si los campos Nombre y Ciudad tienen valor, solo se habilitará el botón Enviar.

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>
<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>


Solo para ser exigente, ¿no deberías esperar hasta (al menos) el segundo personaje antes de habilitar el botón? ;-)
Chris Pink

1

mira este fragmento de mi proyecto

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

así que simplemente deshabilité el botón después de ejecutar su operación

$(this).attr('disabled', 'disabled');


1

Se suministran todos los tipos de solución. Así que quiero intentar una solución diferente. Simplemente será más fácil si agrega un idatributo en sus campos de entrada.

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

Ahora aquí está tu jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

-1

Espero que debajo del código ayude a alguien ... !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.