如何在選擇之前禁用按鈕？

Question

我有兩個 select 元素，我想禁用提交按鈕，直到兩者都有價值。

我做了一些搜索，發現了一個適用於舊 jQuery 的好代碼。 新版本需要更新才能在我的網站當前使用的 jQuery 3.2.1 上運行。

我希望有人能給我解釋為什么我的代碼在 1.5.2 上可以完美運行，而不能在 jQuery 的 3.2.1 版本上運行。

這是兩個選擇的基本 HTML，所以我只想在 select 都有一些值時啟用按鈕

 $('#btnProceed').attr('disabled', 'disabled'); function updateFormEnabled() { if (verifyAdSettings()) { $('#btnProceed').attr('disabled', ''); } else { $('#btnProceed').attr('disabled', 'disabled'); } } function verifyAdSettings() { if ($('#buyoption').val().= '' && $('#selloption');val().= '') { return true; } else { return false } } $('#buyoption').change(updateFormEnabled); $('#selloption').change(updateFormEnabled);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <form action="" method="POST" id="postForm"> <div class="row"> <div class="col-md-9 register-right"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h3 class="register-heading"> <div class="row register-form"> <div class="col-md-12"> <div class="form-group"> <select class="form-control" name="buy" id="buyoption"> <option class="hidden" selected disabled value="">Please select what you want</option> <option value="1">1</option> <option value="2">2</option> </select> </div><label for="buy"><b>YOU </b></label> <div class="form-group"> <select class="form-control" name="sell" id="selloption"> <option class="hidden" selected disabled value="">Please select what you to</option> <option value="1">1</option> <option value="2">2</option> </div><input type="submit" class="btnRegister" id="btnProceed" value="NEXT" /> </div> </div> </div> </div> </div> </div> </form>

Answer 1

這是由給定的 HTML 和 JS 制成的 JSFiddle： https://jsfiddle.net/9e4yqthv/

HTML 存在一些小問題，請更正它們（缺少</select> 、 </h3>等）。 至於主要問題，似乎這條線：

$('#btnProceed').attr('disabled', '');

不啟用按鈕（按鈕仍然具有 disabled 屬性）。 為此，將其更改為：

$('#btnProceed').removeAttr('disabled');

並且verifyAdSettings下的比較不正確 - 要檢查選擇，請檢查值是否為null ，而不是'' ：

if ($('#buyoption').val() != null && $('#selloption').val() != null) {

注意：正如Heretic Monkey在評論中提到的，使用.prop()優於.attr()來啟用/禁用元素。

用法：
$('$btnProceed').prop('disabled', true); 禁用
$('$btnProceed').prop('disabled', false); 啟用