单击单选按钮时禁用下拉框答案

【问题标题】：Disable drop down box on radio button click单击单选按钮时禁用下拉框
【发布时间】：2013-02-01 00:20:58
【问题描述】：

如下所示，我有两个单选按钮和一个下拉框。我想做的是： 1. 未选中时，隐藏或灰显下拉框，并且 2. 勾选是时，显示下拉框。

任何指针将不胜感激！

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

【问题讨论】：

标签： jquery drop-down-menu radio-button

【解决方案1】：

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

此外，根据您在页面加载时选择的默认单选按钮设置下拉菜单的显示样式或 HTML 中的 disabled 属性。

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

【讨论】：

【解决方案2】：

$('input:radio[name="discount"]').change(function() {
    if ($(this).val()=='Yes') {
        $('#discountselection').attr('disabled',true);
    } else
        $('#discountselection').removeAttr('disabled');
});

http://jsfiddle.net/uSmVD/

【讨论】：

【解决方案3】：

您需要将select 控件设置为disabled 并使用与此类似的代码：

$(function(){
    $('input:radio[name=discount]').one('change', function(){
        $('.purple').removeAttr('disabled');
    });
});

见http://www.jsfiddle.net/A3BuQ/6/

参考：.one()，.removeAttr()

【讨论】：

我在页面上有其他单选按钮。这会影响那些吗？
@TaraWalsh：是的。我修改了代码以使其更具体。
酷，我已将这段 javascript 代码放在我的 HTML 文档的顶部，如下所示：这是正确的使用方法吗代码？现在好像不行。
如果他们改回来，这不会重新禁用。

【解决方案4】：

$(function(){
  $('input:radio').bind('change', function(){
     $('#discountselection').attr('disabled', !$("#yes").is(":checked"));
  });
});

【讨论】：

【解决方案5】：

这样可以吗？

$('input:radio').bind('change', function(){
    $('select').attr('disabled', $(this).val() == "No");
});

经过测试，效果很好。祝你好运。

【讨论】：

这很麻烦。不删除 disabled 属性可能会导致某些浏览器仍然禁用该元素，即使它的值为 0。实际上，您设置的值并不重要，只要存在 disabled 属性，元素必须获取已禁用 (w3c)。

【解决方案6】：

你可以用 jQuery 隐藏它：

$(document).ready(function(){     

$('#discountselection').hide();

        $('#No').click(function(){
            $('#discountselection').hide();
        });

        $('#Yes').click(function(){
            $('#discountselection').show();
        });
});

检查一下： http://www.jsfiddle.net/cFUsU/

更新：添加了 $(document).ready();当页面准备就绪时，开始设置此代码的方法

【讨论】：

嗨，我应该在哪里插入这个 javascript？我对它有点新手。
是的，我已经做到了，但它似乎对我不起作用 :-\ 还有什么我需要做的吗？
它有什么作用？我可以看看你的代码吗？我确定缺少一些简单的东西:) 你在 jsfiddle 中检查了吗？如果您有我可以查看的代码，我们会继续进行。