【问题标题】:disable select form if radio is checked如果选中收音机,则禁用选择表单
【发布时间】:2012-11-13 00:17:54
【问题描述】:

如果选择了单选按钮,如何禁用选择表单下拉菜单?

如果用户选择#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>

非常感谢您的任何回答!我研究这个问题已经很久了,我发现的所有解决方案似乎都不能解决我的问题。

【问题讨论】:

  • 看不到错误在哪里...尝试$('#preference').prop('disabled', true),然后('disabled', false)
  • 对不起,为什么你需要这样做$(update_select);? update_select 是一个函数,对吧?
  • 哦,实际上有一些东西......为什么`$(update_select)那应该做什么?你的意思是update_select()??

标签: javascript jquery forms select radio


【解决方案1】:

用 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);

它会起作用的

【讨论】:

    【解决方案2】:
    $('input[type=radio]').change(update_select);​
    

    【讨论】:

      【解决方案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/

      【讨论】:

        【解决方案4】:

        您只为No 收音机添加更改事件,将其更改为:

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

        演示:: jsFiddle

        【讨论】:

        • 我已经尝试了这个论坛上的所有答案,不幸的是它们都不适合我。我不太了解脚本...有什么我遗漏的吗?
        • 您是否在控制台中看到任何错误...?你在 jsfiddle 中看到演示链接了吗?
        • 控制台没有错误,是的,我看到了演示链接。我的代码和你的完全一样,但似乎根本不适合我。我真的很感谢你的帮助。感谢您如此迅速地回复,我会继续努力。一定有一些小东西我错过了。也许我没有正确引用 jquery 库。还是谢谢!
        • 对不起!有一个错误! SyntaxError: 非法字符 [Break On This Error] $("input[name='choice']").change(update_select);​
        猜你喜欢
        • 2019-04-22
        • 1970-01-01
        • 2013-03-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多