javascript - disabled - prop jquery

¿Cómo puedo verificar si un archivo ha sido seleccionado en un elemento<input type="file">?

Question

Tengo varias casillas de verificación y una entrada de carga de archivos. Me gustaría volver a habilitar un botón si una o más casillas de verificación están marcadas Y si el valor de entrada no es nulo.

Aquí hay un enlace a bootply

Aquí mi html

<div class="upload-block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="file" id="InputFile">
    <button id="upload-btn" type="button blue-button" 
            class="btn blue-button" disabled>Submit</button>

</div>

Aquí está mi punto de inicio de javascript: actualizado mediante Karl Bind un evento de change en todas las entradas y luego uso alguna condición:

  $(''.upload-block input'').change(function() {
    $(''#upload-btn'').prop(
        ''disabled'',
        !($(''.upload-block :checked'').length && $(''#InputFile'').val()));
  });

Ejemplo

Esto funciona para todas las casillas de verificación y #InputFile tiene un valor distinto de ninguno. es decir, donde se ha elegido un archivo. Sin embargo, esto no funciona en IE9

¿Cómo puedo actualizar esto para trabajar en IE9?

Answer 1

Aplicaría la validación a todos los elementos involucrados. De esta forma, las casillas de verificación o la entrada se actualizarán y se desactivarán.

$(''#InputFile, .upload-block :checkbox'').change(function(){
   var isValid= $(''.upload-block :checkbox:checked'').length  && $(''#InputFile'').val();
   $(''#upload-btn'').prop(''disabled'',isValid);
});

Answer 2

Me gusta esto:

if($(''#InputFile'').val().length){
//do your stuff
}

Puede utilizarlo mejor utilizando el método $ .trim () para no permitir (recortar) espacios:

if($.trim($(''#InputFile'').val()).length){
//do your stuff
}

Answer 3

Pure JS:

<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>

<script>
    function buttonSubmitClicked(event) {

        if (!document.getElementById("InputFile").value) {
            event.preventDefault();
            alert("Please choose a file!");
        } else {
            alert("File''ve been chosen");
        }
    }
</script>

jsfiddle: compruébalo

Answer 4

Vincula un evento de change en todas las entradas y luego usa alguna condición:

  $(''.upload-block input'').change(function() {
    $(''#upload-btn'').prop(
        ''disabled'',
        !($(''.upload-block :checked'').length && $(''#InputFile'').val()));
  });

Ejemplo

Answer 5

  $(''.upload-block input'').change(function() {
        if ($(''.upload-block :checked'').length && $(''#InputFile'').val() ) {

          $(''#upload-btn'').prop(''disabled'',false);
        }
        else {
          $(''#upload-btn'').prop(''disabled'',true); 
        }
         });

No es necesario tener selectores por separado para la casilla de verificación y el archivo de entrada. La entrada de bloque de carga es suficiente para capturar tanto la casilla de verificación como el cambio de valor del archivo.