仅在选择两个无线电组时才启用按钮答案

【问题标题】：Enable button only when both radio groups are selected仅在选择两个无线电组时才启用按钮
【发布时间】：2017-06-15 17:56:04
【问题描述】：

我正在使用 ASP.NET 控件。在我的表单中，我有 4 个单选按钮。其中一个单选按钮组名称是 book，另一个是 card。如果没有单击任何单选按钮或仅单击其中一个组，我的目标是禁用下一个按钮。要启用下一个按钮，用户必须从书籍选项之一和卡片选项之一中进行选择。我怎样才能做到这一点？

视觉

ASP.NET - HTML

<div style="padding:30px; background-color:antiquewhite;">

    <div style="background-color:aliceblue; width:190px; padding:10px;">
        <asp:RadioButton ID="RadioPassBookYes" runat="server" Text="Book-Yes" GroupName="book"/>
        <asp:RadioButton ID="RadioPassBookNo" runat="server" Text="Book-No" GroupName="book"/>
    </div>
    <br>
    <div style="background-color:ActiveBorder; width:190px;  padding:10px;">
        <asp:RadioButton ID="RadioPassCardYes" runat="server" Text="Card-Yes" GroupName="card"/>
        <asp:RadioButton ID="RadioPassCardNo" runat="server" Text="Card-No" GroupName="card"/>
    </div>

    <br>
    <asp:Button ID="BtnNextRecentInfo" runat="server" Text="Next" disabled="disabled"/>
    &nbsp;
    <asp:Button ID="btnCheck" runat="server" Text="Check" />
</div>

JS 脚本

<script type="text/javascript">

        var isCheckedPassBookYes = $("#<%=RadioPassBookYes.ClientID%>").prop('checked');
        var isCheckedPassBookNo = $("#<%=RadioPassBookNo.ClientID%>").prop('checked');
        var isCheckedPassCardYes = $("#<%=RadioPassCardYes.ClientID%>").prop('checked');
        var isCheckedPassCardNo = $("#<%=RadioPassCardNo.ClientID%>").prop('checked');


        $("#<%=RadioPassBookYes.ClientID%>").click(function () {
        });
        $("#<%=RadioPassBookNo.ClientID%>").click(function () {
            isCheckedPassBookNo = true
        });
        $("#<%=RadioPassCardYes.ClientID%>").click(function () {
        });
        $("#<%=RadioPassCardNo.ClientID%>").click(function () {
            isCheckedPassCardNo = true
        });


        if (isCheckedPassBookYes === true) {
            $("#<%=BtnNextRecentInfo.ClientID%>").attr("disabled", "disabled");
        }

        if (isCheckedPassBookNo === true) {
            $("#<%=BtnNextRecentInfo.ClientID%>").removeAttr("disabled");
        }
</script>

【问题讨论】：

标签： javascript c# jquery html asp.net

【解决方案1】：

这可能行得通：

<script type="text/javascript">


            $("#<%=RadioPassBookYes.ClientID%>").click(function () {
                check_selection();
            });
            $("#<%=RadioPassBookNo.ClientID%>").click(function () {
               check_selection();
            });
            $("#<%=RadioPassCardYes.ClientID%>").click(function () {
                check_selection();
            });
            $("#<%=RadioPassCardNo.ClientID%>").click(function () {
                check_selection();
            });

            check_selection();

            function check_selection()
            {
                var isCheckedPassBookYes = $("#<%=RadioPassBookYes.ClientID%>");
                var isCheckedPassBookNo = $("#<%=RadioPassBookNo.ClientID%>");
                var isCheckedPassCardYes = $("#<%=RadioPassCardYes.ClientID%>");
                var isCheckedPassCardNo = $("#<%=RadioPassCardNo.ClientID%>");

                if(
                   (isCheckedPassBookNo.is(':checked') || isCheckedPassBookYes.is(':checked'))
                   && (isCheckedPassCardYes.is(':checked') || isCheckedPassCardNo.is(':checked'))
                    )
                    {

                        $("#<%=BtnNextRecentInfo.ClientID%>").removeAttr("disabled");
                    }
                    else
                    {
                        $("#<%=BtnNextRecentInfo.ClientID%>").attr("disabled", "disabled");
                    }

            }           
    </script>

【讨论】：

它几乎可以工作了！这就是我测试它的方式。我从组簿中选择了一个单选按钮，然后从组卡中选择了一个选项。下一个按钮已启用，这是个好消息！但是当我刷新页面并且当我尝试点击下一个按钮时我的单选按钮已经被选中，它被禁用了，因为我没有点击其中一个单选按钮。
谢谢！这正是我想要的。
很高兴我能提供帮助:)

【解决方案2】：

抱歉，我必须添加一个答案，该答案使用 RadioButtonList 而不是 2 个 RadioButtons 用于一组，使用 aspnet Enabled 属性作为按钮，并使用大约 1/4 的 javascript 行作为接受的答案.

<asp:RadioButtonList ID="RadioPassBook" runat="server">
    <asp:ListItem Text="Book-Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="Book-No" Value="0"></asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList ID="RadioPassCard" runat="server">
    <asp:ListItem Text="Card-Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="Card-No" Value="0"></asp:ListItem>
</asp:RadioButtonList>

<asp:Button ID="BtnNextRecentInfo" runat="server" Text="Next" Enabled="false" />

<script type="text/javascript">
    $("#<%= RadioPassBook.ClientID %>, #<%= RadioPassCard.ClientID %>").change(function () {
        CheckBothRadioButtonLists();
    });

    function CheckBothRadioButtonLists() {
        if ($("input[name='<%= RadioPassBook.UniqueID %>']:checked").val() == null || $("input[name='<%= RadioPassCard.UniqueID %>']:checked").val() == null) {
            $("#<%= BtnNextRecentInfo.ClientID %>").attr("disabled", "disabled");
        } else {
            $("#<%= BtnNextRecentInfo.ClientID %>").removeAttr("disabled");
        }
    }
</script>

如果你想使用 aspnet Validator，这里是 sn-p。

<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="CheckBothRadioButtonLists" ErrorMessage="Both lists have to be selected"></asp:CustomValidator>

<script type="text/javascript">
    function CheckBothRadioButtonLists(sender, element) {
        if ($("input[name='<%= RadioPassBook.UniqueID %>']:checked").val() == null || $("input[name='<%= RadioPassCard.UniqueID %>']:checked").val() == null) {
            element.IsValid = false;
        } else {
            element.IsValid = true;
        }
    }
</script>

【讨论】：