如何在选择之前禁用按钮？

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); 启用