仅在同时选择两个无线电组时启用按钮

Question

I'm using ASP.NET controls. In my form, I have 4 radio buttons. One of the radio buttons group names is book the other one is card. My goal is to disable the next button if none of the radio buttons is clicked or if only one of the groups is clicked. To enable the next button the user must select from one of the book options and one of the card options. How can I accomplish this?

Visual

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

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

Answer 1

This might just work :

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

Answer 2

Sorry but I had to add an answer that uses a RadioButtonList instead of 2 RadioButtons for one group, uses the aspnet Enabled property for the button and is using about 1/4th of the javascript lines as the accepted answer.

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

And here the snippet if you want to use a aspnet Validator.

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