jQuery 单击单选按钮时禁用下拉框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3701394/
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 drop down box on radio button click
提问by 109221793
I have two radio buttons and a drop down box as you can see below. What I want to do is: 1. While no is checked, either hide, or grey out the drop down box, and 2. While yes is checked, show the drop down box.
我有两个单选按钮和一个下拉框，如下所示。我想要做的是： 1. 选中 no 时，隐藏或灰色下拉下拉框，以及 2. 选中 yes 时，显示下拉框。
Any pointers would be appreciated!
任何指针将不胜感激！
<td colspan="4">
<input name="discount" type="radio" id="Yes" value="Yes" />Yes
<input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />
<select class="purple" name="discountselection" id="discountselection">
<option value="1 Year" selected="selected">1 Year</option>
<option value="2 Years">2 Years</option>
<option value="3 Years">3 Years</option>
</select>
</td>
回答by Siva Gopal
<script type="text/javascript">
$("#Yes").click(function() {
$("#discountselection").attr("disabled", false);
//$("#discountselection").show(); //To Show the dropdown
});
$("#No").click(function() {
$("#discountselection").attr("disabled", true);
//$("#discountselection").hide();//To hide the dropdown
});
</script>
Also, set the dropdown's display style, or disabled property in HTML based on your default radiobutton selected on page load.
此外，根据页面加载时选择的默认单选按钮，在 HTML 中设置下拉列表的显示样式或禁用属性。
<select name="discountselection" id="discountselection" disabled="disabled">
<option value="1 Year" selected="selected">1 Year</option>
<option value="2 Years">2 Years</option>
<option value="3 Years">3 Years</option>
</select>
回答by Robert
$('input:radio[name="discount"]').change(function() {
if ($(this).val()=='Yes') {
$('#discountselection').attr('disabled',true);
} else
$('#discountselection').removeAttr('disabled');
});?
回答by jAndy
You need to set your selectcontrol to disabledand use a similar code to this one:
您需要将select控件设置为disabled并使用与此类似的代码：
?$(function(){
$('input:radio[name=discount]').one('change', function(){
$('.purple').removeAttr('disabled');
});
});?
See http://www.jsfiddle.net/A3BuQ/6/
见http://www.jsfiddle.net/A3BuQ/6/
Ref.: .one(), .removeAttr()
参考：.one(), .removeAttr()
回答by d2burke
You can hide it with jQuery:
您可以使用 jQuery 隐藏它：
$(document).ready(function(){
$('#discountselection').hide();
$('#No').click(function(){
$('#discountselection').hide();
});
$('#Yes').click(function(){
$('#discountselection').show();
});
});
check it: http://www.jsfiddle.net/cFUsU/
检查它：http: //www.jsfiddle.net/cFUsU/
UPDATE: added $(document).ready(); method to start set this code to action when the page is ready
更新：添加了 $(document).ready(); 当页面准备好时开始将此代码设置为操作的方法
回答by Flo Edelmann
?$(function(){
$('input:radio').bind('change', function(){
$('#discountselection').attr('disabled', !$("#yes").is(":checked"));
});
});?
回答by mkoistinen
Would this do it?
这能行吗？
$('input:radio').bind('change', function(){
$('select').attr('disabled', $(this).val() == "No");
});
Tested, works great. Good luck.
经测试，效果很好。祝你好运。
