有兩個條件的禁用按鈕

Question

l 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()）

$(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>

Answer 2

變化事件監聽器change()事件不keyup，該KEYUP從用戶監聽鍵盤輸入，不適用於選擇

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

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