Question

我有多个复选框和一个文件上传输入。如果选中一个或多个复选框并且输入值不为空，我想重新启用按钮。

的链接

这是我的HTML

<div class="upload-block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="file" id="InputFile">
    <button id="upload-btn" type="button blue-button" 
            class="btn blue-button" disabled>Submit</button>

</div>

这是我的javascript起点：通过卡尔更新在所有输入上绑定change事件，然后使用某些条件：

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

Example

这适用于所有复选框，#InputFile的值不是无。即选择文件的位置。但是这在IE9中不起作用

如何更新此功能才能在IE9中使用？

Answer 1

在所有输入上绑定change事件，然后使用某些条件：

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

<强> Example

Answer 2

像这样：

if($('#InputFile').val().length){
//do your stuff
}

使用$ .trim（）方法可以更好地使用，不允许（修剪）空格：

if($.trim($('#InputFile').val()).length){
//do your stuff
}

Answer 3

Pure JS：

<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>

<script>
    function buttonSubmitClicked(event) {

        if (!document.getElementById("InputFile").value) {
            event.preventDefault();
            alert("Please choose a file!");
        } else {
            alert("File've been chosen");
        }
    }
</script>

jsfiddle: check it out

Answer 4

我会将验证应用于所涉及的所有元素。这样更改复选框或输入将更新已禁用

$('#InputFile, .upload-block :checkbox').change(function(){
   var isValid= $('.upload-block :checkbox:checked').length  && $('#InputFile').val();
   $('#upload-btn').prop('disabled',isValid);
});

Answer 5

  $('.upload-block input').change(function() {
        if ($('.upload-block :checked').length && $('#InputFile').val() ) {

          $('#upload-btn').prop('disabled',false);
        }
        else {
          $('#upload-btn').prop('disabled',true); 
        }
         });

对于复选框和输入文件，不需要单独的选择器.upload-block输入足以捕获复选框和文件值更改

如何检查是否在<input type =“file”/>元素中选择了文件？

5 个答案: