jQuery deshabilitar / habilitar el botón enviar

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?

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

$(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");
  }
}

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

Para eliminar el uso del atributo deshabilitado,

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

y para agregar el uso de atributos deshabilitados,

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

Disfruta :)

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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>

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

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

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