deshabilitar - disabled javascript

jQuery deshabilitar/habilitar el botón de envío

Question

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 (deshabilitado = "deshabilitado").
• 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 borra), el botón de envío debería volver a desactivarse.

Probé 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.

Answer 1

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

Answer 2

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 sale de ella). Trate de 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);
        }
     });
 });

Answer 3

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

Answer 4

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 está El enfoque correcto. Hay mucha confusión en cuanto a atributo vs. propiedad.

HTML

El "desactivado" en <input type="button" disabled> en el marcado se denomina 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://.com/a/7572855/664132

JQuery

Relacionado:

Sin embargo, el concepto más importante para recordar sobre el atributo verificado es que no corresponde a la propiedad marcada. El atributo corresponde realmente a la propiedad DefaultChecked y debe 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 de verificación, mientras que la propiedad marcada sí cambia. Por lo tanto, la forma compatible con todos los navegadores para determinar si una casilla 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 entradas y botones o la propiedad marcada de una casilla de verificación. El método .prop () debe usarse para establecer deshabilitado y verificado en lugar del método .attr ().

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

Resumen

Para cambiar las propiedades de 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 de 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. Así que uno podría combinar los dos (algunas personas también escuchan keyup y pegan).

Aquí hay un pedazo 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);
    });
});

Answer 5

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

Answer 6

Las respuestas anteriores no tratan también la comprobación de eventos de cortar / pegar basados ​​en el menú. Abajo 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 activan antes de que se produzca el cambio, por lo que el tiempo de espera da un poco de tiempo para que eso ocurra.

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

Answer 7

Para eliminar el uso del atributo deshabilitado,

$ ("# elementID"). removeAttr (''disabled''); y para agregar el uso del atributo deshabilitado,

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

Answer 8

Para eliminar el uso del atributo deshabilitado,

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

y para agregar el uso del atributo deshabilitado,

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

Disfrutar :)

Answer 9

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 atributo de id 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)
});

Answer 10

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

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

Answer 11

Simplemente podemos tener si y si no. Si suponemos que su entrada está vacía, podemos tener

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

otra cosa podemos cambiar falso en verdadero

Answer 12

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 vivo

Answer 13

Tuve que trabajar un poco para que esto se ajustara 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í.

Answer 14

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

tan solo deshabilitó el botón después de su operación ejecutada

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

Answer 15

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

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

Answer 16

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>

Answer 17

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

Answer 18

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