Javascript 仅当选择了两个单选组时启用按钮

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

视觉的

ASP.NET-HTML

JS脚本

---

这可能会奏效：

<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>

---

抱歉，我必须添加一个答案，该答案使用RadioButtonList，而不是一个组中的两个RadioButton，使用按钮的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验证器，这里是代码片段

<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>

---

它几乎起作用了！这就是我测试它的方式。我从组簿中选择了一个单选按钮，然后从组卡中选择了一个选项。“下一步”按钮已启用，这是一个好消息！但是，当我刷新页面时，当我尝试单击“下一步”按钮时，我的单选按钮已被选中，它被禁用，因为我没有单击其中一个单选按钮。谢谢！这正是我要找的。我很高兴能帮上忙：

<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>

<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>