Question

我有一个问题，jquery禁用依赖于两个条件的按钮。用户必须选择一个选项的第一个条件。用户必须上传文件的第二个条件。我尝试编写第一个的代码条件但效果不佳

这是上传文件的表单代码

<form action="{{route('filestest')}}" method="post" enctype="multipart/form-data">

     {{csrf_field()}}

    <input id="file-id"type="file" name="file1" ></input>

如果两个条件无效

，这是我要禁用它的按钮的代码

<button  class="enableOnInput"type="submit" value="Submit" id="submitorder" disabled="disabled">send file</button>

这是列表的代码，使用户可以选择一个选项

    <select id="select-id" name="select-name" >
    <option value="" selected="selected" ></option>
   <option value="cr">Course Report. </option>
    <option value="st" >Students' Sample of Test (Final Exam).(Highest)</option>
</select>

这里是javascript代码，仅为第一个条件禁用发送文件按钮。

<script type="text/javascript"src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
  $('#select-id').keyup(function(){
  if($(this).val() == ''){
$('.enableOnInput').prop('disabled',true);
    }else{
      $('.enableOnInput').prop('disabled', false);
    }
  });
});
</script>

Answer 1

将事件监听器更改为change()事件而不是keyup，keyup侦听来自用户的键盘输入，不适用于选择

＆＃13;

$(function(){
  $('#select-id, #file-id').change(function(){
  
    $('.enableOnInput').prop('disabled',($('#select-id').val() == '' || $('#file-id').val() == ''));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-id" name="select-name" >
    <option value="" selected="selected" ></option>
   <option value="cr">Course Report. </option>
    <option value="st" >Students' Sample of Test (Final Exam).(Highest)</option>
</select>

 <input id="file-id" type="file" name="file1" ></input>

<button  class="enableOnInput"type="submit" value="Submit" id="submitorder" disabled="disabled">send file</button>

＆＃13;

Answer 2

这将检查并确保这两个条件。（另请注意，您应使用change()而不是keyup()）

＆＃13;

$(function() {
  $('#select-id, #file-id').change(function() {
    $('.enableOnInput').prop('disabled', !($('#select-id option:selected').val() != '' && $('#file-id').val() != ''));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file-id" type="file" name="file1"></input>

<button class="enableOnInput" type="submit" value="Submit" id="submitorder" disabled="disabled">send file</button>

<select id="select-id" name="select-name">
    <option value="" selected="selected" ></option>
   <option value="cr">Course Report. </option>
    <option value="st" >Students' Sample of Test (Final Exam).(Highest)</option>
</select>

＆＃13;

禁用具有两个条件的按钮

2 个答案: