Question

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

我的代码：

＆＃13;

<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" />

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

要一次启用所有这些功能，请从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事件，如下所示

＆＃13;

$('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);
  }
})

＆＃13;

<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" />

＆＃13;

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

3 个答案: