1

Me gustaría saber de que manera puedo comparar que dos input file tiene cargado archivos y habilitar un botón al momento que detecte que los 2 ya cargaron información.

NOTA: Si uno de los inputs no tiene información el botón se deshabilita, solo de habilita siempre y cuando los 2 tengan información (solo tengo este código y funciona solo en un botón).

Este es el código que tengo:

$(function() {
    $('#Field1').change(function(){
        $('#btn').prop("disabled", this.files.length == 0);
    });
});

2 respuestas 2

1

Crea un método que realice la validación en lugar del function anónimo que creas, y para cada input verificas que tenga algún valor con .val() si ambos tienen valor entonces cambias la propiedad al botón.

function validar() {
    // Aqui verificamos que ambos tengan valor
    $("#btnEnviar").prop("disabled", (!$("#Field1").val() || !$("#Field2").val()));
}
// En el evento change le envías el método al que accederá una vez cambiado el valor (El change debe hacerse para cada input en este caso)
$("#Field1").change(validar);
$("#Field2").change(validar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="Field1" />
<input type="file" id="Field2" />

<button id='btnEnviar' disabled="disabled">Enviar</button>

1
  • Gracias , amigos posiblemente siga preguntado por este medio otras dudas que me surgen Commented el 18 abr. 2023 a las 20:42
1

Puedes evaluar el estado de los botones apoyándote de un booleano para cada input, aquí indico que si el valor del input tiene valor, su estado va a cambiar a true. Luego hay una condicional donde digo que si ambos booleanos son true, habilito el botón, de lo contrario permanece deshabilitado. Ejemplo:

$(function() {
  var file1 = false;
  var file2 = false;

  $('#Field1').change(function() {
    // si esto cumple, "file1" es true, de lo contrario es false.
    file1 = this.files.length > 0;
    verificarInputs();
  });

  $('#Field2').change(function() {
    // si esto cumple, "file2" es true, de lo contrario es false.
    file2 = this.files.length > 0;
    verificarInputs();
  });

  function verificarInputs() {
    // Si "file1" y "file2" son true, habilito el botón, de lo contrario permanece deshabilitado.
    if (file1 && file2) {
      $('#btn').prop('disabled', false);
    } else {
      $('#btn').prop('disabled', true);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="Field1"><br>
<input type="file" id="Field2"><br>
<br>
<button id='btn' disabled>Enviar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.