加载文件时阻止点击表单按钮

Question

我使用以下代码段，允许用户通过一个上传按钮上传最多3个文件。在上传文件时，将运行动画来代替上传按钮。

我的要求是我需要阻止用户在上传文件时点击任何输入字段按钮。我不想为此使用hide（）函数。在文件上传/加载动画运行时，是否有一种方法可以阻止输入字段按钮被点击。 最近开始使用jQuery，所以仍然是一个初学者，因此很想使用一个简单的解决方案。谢谢！

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click", ".UploadBtn", function(event) {
            $(".p").each(function(file) {
                if  ($(this).val()) {
                    $(".loader").show();
                    $(".spinner").show();
                    $(".UploadBtn").hide();
                }
            })
        });
    });
</script>

我的HTML代码如下。 ＆＃34; p＆＃34; class用于{{ form.photo1 }}，{{ form.photo2 }}＆amp; {{ form.photo3 }};

<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

  

当红色按钮指向的上传按钮是   点击一个动画开始在文件所在的位置运行   上传。在此期间，我想阻止任何人点击   在选择文件（）上，蓝色箭头指向它。

Answer 1

尝试使用prop禁用上传按钮

$(document).ready(function() {
 $(document).on("click", ".UploadBtn", function(event) {
  $(".p").each(function(file) {
    if  ($(this).val()) {
      $(".loader").show();
      $(".spinner").show();
      $(".UploadBtn").prop("disabled", "true");
    }
  })
 });
});

Answer 2

在 jQuery 1.6 + 中，您可以动态地将atrribute attr='disabled'或attr='readonly'添加到输入字段，直到您确认文件已加载为止：

// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);

// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);

另请快速查看详细答案中prop的内容。