禁用其他输入[文件]，直到第一个（文件＃1）被选中

Question

我有多个文件上传输入，我正在尝试通过 jquery 禁用其余输入，直到第一个（文件 #1）被选中，然后启用其余输入

我的代码：

<input type="file" id="checkupload" name="image" />
<input type="file" id="checkupload" name="image2" />
<input type="file" id="checkupload" name="image3" />
<input type="file" id="checkupload" name="image4" />
<input type="file" id="checkupload" name="image5" />
<input type="file" id="checkupload" name="image6" />
<input type="file" id="checkupload" name="image7" />
<input type="file" id="checkupload" name="image8" />

Answer 1

禁用其余字段，更改时启用：

$(document).ready(function () {
  $('.checkupload').change(function () {
    if ($(this).next().length) {
      $(this).next().prop('disabled', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="checkupload" name="image"/>
<input type="file" class="checkupload" name="image2" disabled="disabled"/>
<input type="file" class="checkupload" name="image3" disabled="disabled"/>
<input type="file" class="checkupload" name="image4" disabled="disabled"/>
<input type="file" class="checkupload" name="image5" disabled="disabled"/>
<input type="file" class="checkupload" name="image6" disabled="disabled"/>
<input type="file" class="checkupload" name="image7" disabled="disabled"/>
<input type="file" class="checkupload" name="image8" disabled="disabled"/>

---

要同时启用所有这些，请从 IF 解包代码并删除 .next()

Answer 2

一个简单的解决方案

默认禁用所有输入，但不是第一个。 将类添加到您的输入文件以区分禁用的样式。 随心所欲地改变风格。 添加

 <input type="file" onchange="fileSelected(this)" id="checkupload1" class="file-design" name="image" />
 <input type="file" id="checkupload2" class="file-design" name="image2"  disabled="disabled"/>
 <input type="file" id="checkupload3" class="file-design" name="image3"  disabled="disabled"/>
 <input type="file" id="checkupload4" class="file-design" name="image4"  disabled="disabled"/>
 <input type="file" id="checkupload5" class="file-design" name="image5"  disabled="disabled"/>
 <input type="file" id="checkupload6" class="file-design" name="image6"  disabled="disabled"/>
 <input type="file" id="checkupload7" class="file-design" name="image7"  disabled="disabled"/>
 <input type="file" id="checkupload8" class="file-design" name="image8"  disabled="disabled"/>

通过这段代码，你可以做你想做的事。

 <script type="text/javascript">

  function fileSelected(sender) {

   $(".file-design").prop('disabled', false);

  }


 </script>

Answer 3

您可以使用.prop("disabled", true) 禁用input，然后在jQuery 中检查change 事件，如下所示

$('input[type="file"]:not(:first)').prop("disabled", true);
$('input[type="file"]:first').on('change', function() {
  if ($(this).val() == '') {

  } else {
    $('input[type="file"]').prop("disabled", false);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="checkupload" name="image" />
<input type="file" id="checkupload" name="image2" />
<input type="file" id="checkupload" name="image3" />
<input type="file" id="checkupload" name="image4" />
<input type="file" id="checkupload" name="image5" />
<input type="file" id="checkupload" name="image6" />
<input type="file" id="checkupload" name="image7" />
<input type="file" id="checkupload" name="image8" />