javascript 禁用提交按钮，直到选择框选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5559983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable SUBMIT button until select box choices
提问by 422
I have a small form.
我有一个小表格。
Two select box elements and a submit button.
两个选择框元素和一个提交按钮。
The select box elements collectively when selections are chosen, fire off an ajax request.
选择选择选择框元素时，选择选项时，请从Ajax请求中启动。
What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.
我想要做的是，禁用提交按钮，直到用户从选择下拉列表中进行选择。
They must make a selection from BOTH select drop downs, before the Submit button is enabled.
在启用提交按钮之前，他们必须从两个选择下拉列表中进行选择。
I dont mind if the submit button is hidden until selections made.
我不介意提交按钮是否隐藏，直到做出选择。
Brief Code:
简要代码：
<form id="ad_form" method="post" action="">
<p>
<select id="ad_type" name="ad_type">
<option value="" selected="selected">Select premium ad type</option>
<option value="<?php echo TYPE_USER;?>">Featured Agent</option>
<option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
</select>
<label for="ad_type" class="labelStrong">Advertising Type</label>
</p>
<p>
<select id="ad_duration" name="ad_duration">
<option value="" selected="selected">Select premium ad duration</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthy</option>
</select>
<label for="ad_duration" class="labelStrong">Advertising Duration</label>
</p>
<p>
<div id="calender">
</div>
</p>
<p>
<input type="submit" name="submit" value="Submit" id="submitorder" />
</p>
</form>
回答by ctcherry
Here's a demo that seems to do what you want:
这是一个演示，似乎可以满足您的要求：
That javascript code would go in a $(document).ready()block
该 javascript 代码将放在一个$(document).ready()块中
回答by Kon
If you give all your selects a common class name (like 'required') , you can do something like this:
如果你给你所有的选择一个通用的类名（比如 'required'），你可以做这样的事情：
$('select.required').change(function() {
var total = $('select.required').length;
var selected = $('select.required option:selected').length;
$('#submitorder').attr('disabled', (selected == total));
});
This is not tested code. This documentationmight help. This jquery discussionmight help too.
这不是经过测试的代码。 该文档可能会有所帮助。 这个 jquery 讨论也可能有帮助。
回答by Malk
$(function() {
$("#submitorder").css("visibility", "hidden");
$("#ad_form select").bind("change", function() {
if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
$("#submitorder").css("visibility", "visible");
} else {
$("#submitorder").css("visibility", "hidden");
}
});
});
回答by Ceezey
Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegantsolution that is simple at the same time has to be the way to go.
Gah，我不得不同意 Kon 在这个问题上的观点——现在修复，然后再担心它的答案有其一席之地，但一个优雅同时又简单的解决方案必须是要走的路。
My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)
我的解决方案：（来自一个线程的信用：JQuery Enable / Disable Submit Button in IE7）
$('select.required').change(function() {
var total = = $('select.required').length;
var selected = $('#ad_form').find("select.required option[value!='':selected").length;
$('#submitorder').prop('disabled', (selected != total));
});
Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!
顺便说一句，感谢 ctcherry 在 JSFiddle 站点上演示代码 - 我以前从未见过，将来会使用它！
回答by Rasika
Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.
在两个选择按钮上使用侦听器进行更改并检查另一个是否也已设置。如果设置，启用提交按钮。
