javascript - 防止在加载文件时单击表单按钮

Question

我正在使用以下代码片段，它允许一个人使用一个上传按钮上传最多 3 个文件。上传文件时，会运行动画来代替上传按钮。

我的要求是，我需要防止用户在上传文件时单击任何输入字段按钮。我不想为此使用 hide() 函数。 jQuery 中有没有一种方法可以阻止在文件上传/加载动画运行时单击输入字段按钮。最近开始使用 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 代码如下。 “p”类用于{{ form.photo1 }} , {{ form.photo2 }} & {{ 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">

When the upload button, which the red button is pointing at, is clicked an animation starts to run in its place while the file is getting uploaded. During this I want to prevent anyone from clicking on the choose file (), the blue arrow is pointing at it.

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