我在使用 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>
最佳答案
这将检查并确保这两个条件都满足。 (另请注意,您应该使用 change()
而不是 keyup()
)
$(function() {
$('#select-id, #file-id').change(function() {
$('.enableOnInput').prop('disabled', !($('#select-id option:selected').val() != '' && $('#file-id').val() != ''));
});
});
<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>
关于javascript - 有两个条件的禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45544692/