启用多个文件上传的按钮 - HTML

Question

我的 html 中有这段代码，我要在其中上传三个文件。除非选择了文件，否则所有相应文件上传的提交按钮都将被禁用。

$(document).ready(
  function() {
    $('input:file').change(
      function() {
        if ($(this).val()) {
          $('input:submit').attr('disabled', false);
        }
      }
    );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="file" name="fileInput1" id="fileInput1" />
  <input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
  <input type="file" name="fileInput2" id="fileInput2" />
  <input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
  <input type="file" name="fileInput3" id="fileInput3" />
  <input type="submit" value="submit" disabled />
</form>

我担心的是，如果我为第一个表单选择一个文件，其他表单中的提交按钮也会启用。

Answer 1

选项 1： 无论元素的顺序如何，这都会启用想要的按钮：

$(document).ready(
  function(){
    $('form input:file').change(
        function(){
            if ($(this).val()) {
                    // Select button of this form
                    $(this).parent('form')
                        .children('input:submit')
                        .attr('disabled',false);
            } 
        }
    );
});

看到这个jsFiddle

选项 2： 这将在 Input-submit 始终位于 Input-File 旁边的情况下启用它：

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

而不是这个：

$('input:submit').attr('disabled',false); 

看到这个jsFiddle

Answer 2

您需要使用遍历，在正确的表单中找到正确的按钮。

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $(this).siblings('input[type=submit]').attr('disabled',false); 
                } 
            }
            );
    });

这将只查找文件输入的同级输入，这意味着它们在同一个父元素内（在您的情况下，是同一个表单）。