javascript - 如果选中 radio ，则禁用选择表单

Question

如果选择了单选按钮，如何禁用选择表单下拉菜单？

我希望在用户选择#no 单选按钮时禁用#preference 表单，在用户选择#yes 或#maybe 时再次启用它。

这是我的表单代码 -

<form name="xmas" id="xmas" action="send_mail.php" method="post">
            <input type="radio" name="choice" value="Yes" id="yes"/><label for="yes">Yes - I would like to take up the offer</label>
            <input type="radio" name="choice" value="No" id="no"/><label for="no">No - I'm not ready to order yet</label>
            <input type="radio" name="choice" value="Maybe" id="maybe"/><label for="maybe">Maybe - I'm not sure, would you please give me a call</label><br />
            <div class="secondlineform">
                <input type="text" name="name" class="textfield" value="Name" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <input type="text" name="email" class="textfield" value="Email" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <input type="text" name="company" class="textfield" value="Company" onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"/>
                <select class="dropselect" name="preference" label="Preference" id="preference">
                    <option selected="selected" disabled="disabled" value="Preference">Preference</option>
                    <option value="Alcohol Package">Alcohol Package</option>
                    <option value="Gift Card Package">Gift Card Package</option>
                </select>
                <input type="submit" value="" name="submit" id="submit" class="submit"/>

            </div>
        </form>

这是我的脚本代码 -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  var update_select = function () {
    if ($('#no').is(':checked')) {
    $('#preference').attr('disabled', "disabled");
}
else {
    $("#preference").removeAttr("disabled");
}

};

$(update_select);
$('#no').change(update_select);

</script>

非常感谢您的回答!我已经对此进行了多年研究，但我发现的所有解决方案似乎都无法解决我的问题。

Answer 1

你只为 No radio 添加更改事件，将其更改为:

$("input[name='choice']").change(update_select);

演示::jsFiddle