Pregunta jQuery deshabilitar / habilitar el botón de 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 algo se escribe en el campo de texto para eliminar el atributo deshabilitado.
  • Si el campo de texto vuelve a estar vacío (el texto se borra), el botón de enviar debe deshabilitarse nuevamente.

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? Gracias.


682
2017-10-20 14:21


origen


Respuestas:


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 salen de ella). Intente utilizar 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);
        }
     });
 });

1005
2017-10-20 14:26



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

112
2017-10-20 14:23



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 establecer y eliminar el HTML atributo (removeAttr ("disabled")) "disabled", que no es el enfoque correcto. Hay mucha confusión con respecto a atributo vs. propiedad.

HTML

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

HTML vs. 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 verificado es que no se corresponde con la propiedad marcada. los atributo en realidad corresponde a la propiedad checada por defecto y debería usarse solo para establecer el valor inicial de la casilla de verificación. El valor del atributo comprobado no cambia con el estado de la casilla, mientras que la propiedad marcada sí. Por lo tanto, la forma compatible con varios navegadores para determinar si se marca una casilla de verificación 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 del valor de los elementos de entrada, el propiedad deshabilitada de entradas y botones, o la propiedad marcada de una casilla de verificación. El método .prop () se debe usar para desactivar y verificar 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 la .apuntalar() método.

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


En cuanto a la parte de desactivación en el cambio 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. Entonces, uno podría combinar los dos (algunas personas también escuchan la clave y la pegan).

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

66
2017-09-25 09:32



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

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

31
2017-07-10 03:57



eric, su código no pareció funcionar para mí cuando el usuario ingresa texto y luego borra todo el texto. Creé otra versión si alguien experimentó el mismo problema. aquí ya 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');
    }
})

25
2017-11-25 19:52



Para eliminar el uso de atributos desactivados,

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

y para agregar el uso de atributos desactivados,

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

Disfruta :)


25
2018-01-22 10:15



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

Para deshabilitar un botón de enviar 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 %>

10
2017-11-20 16:33



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á Ejemplo en vivo


10
2017-07-10 04:09