如何使用单选按钮禁用组合框（javascript）答案

【问题标题】：how to disable a combo box with radiobutton (javascript)如何使用单选按钮禁用组合框（javascript）
【发布时间】：2012-09-24 15:07:19
【问题描述】：

我的 HTMl 中有 3 个单选按钮和 3 个不同的组合框。我希望 Crtl 通过单选按钮启用/禁用组合框。例如，当我单击 G1 单选按钮时，只有 g1 组合框处于启用状态，而其他组合框处于禁用状态。我怎么用 JS 做这个！？

<input type="radio" name="g1" value="g1"> G1
<input type="radio" name="g2" value="g2"> G2
<input type="radio" name="g3" value="g3"> G3


<select name="g1">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

<select name="g2">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

<select name="g3">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>

【问题讨论】：

标签： javascript combobox radio-button

【解决方案1】：

在 jQuery 中尝试这段代码，效果很好：

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('.radio').click(function(){
            $('.radio').not(this).removeAttr("checked");
            var id="select_"+$(this).attr('id');
            $('select').removeAttr("disabled");
            $('select').not("#"+id).attr('disabled','true');
        });
    });
</script>

html:

<input type="radio" name="g1" value="g1" class="radio" id="g1"> G1
<input type="radio" name="g2" value="g2" class="radio" id="g2"> G2
<input type="radio" name="g3" value="g3" class="radio" id="g3"> G3


    <select name="g1" id="select_g1">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="g2" id="select_g2">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    <select name="g3" id="select_g3">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

JSFIDDLE： *http://jsfiddle.net/Xbcvh/*

【讨论】：

【解决方案2】：

试试这个：

http://jsfiddle.net/VeaVh/1/

您可以编写更好的选择器，这只是一个示例。

【讨论】：

【解决方案3】：

您需要在下拉字段中添加 id 才能使用 javascript 访问它。

然后您可以使用其 ID 禁用它，

使用单选按钮的onclick 事件，您可以运行脚本来启用/禁用按钮

document.getElementById('your_select_id').disabled = true;

【讨论】：