如果单选按钮被选中，禁用选择表单。

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>

非常感谢您的回答！我已经研究了很长时间，但是所有的解决方案似乎都不能解决我的问题。

- user1850722

---

看不出错误在哪里... 尝试使用 $('#preference').prop('disabled', true) 然后再用 ('disabled', false) - elclanrs

抱歉，但是为什么你需要执行 $(update_select);？update_select 是一个函数，对吧？ - djakapm

哦，实际上有点问题...为什么是 $(update_select)？这是什么意思？你是不是想说 update_select()？ - elclanrs

Answer 1

$('input[type=radio]').change(update_select);​

- Boris Gappov

Answer 2

您正在仅为 No 单选按钮添加更改事件，将其更改为：

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

Demo:: jsFiddle

- Sudhir Bastakoti

---

我已经尝试了这个论坛上的所有答案，但不幸的是它们都对我无效。我不太懂脚本... 我是否漏掉了什么？<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var update_select = function () { if ($("#no").is(':checked')) { $("#preference").attr('disabled', "disabled"); } else { $("#preference").removeAttr("disabled"); } }; $("input[name='choice']").change(update_select);​ </script> - user1850722

你在控制台看到任何错误吗？你看到 JSFiddle 上的演示链接了吗？ - Sudhir Bastakoti

控制台没有错误，是的，我看到了演示链接。我的代码和你的完全一样，但对我来说似乎一点作用都没有。非常感谢你的帮助。谢谢你回复得这么快，我会继续努力的。肯定有什么小细节我遗漏了。也许我没有正确引用jQuery库。不管怎样，还是谢谢！ - user1850722

抱歉！发生了一个错误！SyntaxError：非法字符 [在此错误处中断]$("input[name='choice']").change(update_select); - user1850722

Answer 3

你需要将 update_select 函数应用到剩余的单选按钮上，像这样。

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


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

这里是代码片段：http://jsfiddle.net/QXkhM/

- djakapm

Answer 4

将您的单选按钮列表用 ul 标签包裹，并给它一个 ID。

例如：

        <ul id="offer">
        <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 cal
        l</label><br />
        </ul>

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

它会起作用的

- Akhil Sekharan