Enable button after all radio button lists have a selection
Hello,
I'm new to jquery and I'm not sure how to approach this issue i'm having. I have a web page that has 2 radio button lists on the main page and 4 more radio button lists on a modal popup when a user checks a checkbox the popup appears. On the initial page loads the save button on the popup needs to be disabled. I need to use jquery to enable the save button only when all 4 radio button lists have a selection. If the clear button on the popup is clicked the radio button lists on the popup have the selection cleared and the save button needs to be disabled again.
Here is the HTML:
- <table>
- <tr>
- <td>
- <asp:RadioButtonList ID="rbList1" data-req="1" runat="server" RepeatDirection="Vertical" TextAlign="right" >
- <asp:ListItem Value="BB" Text="Baseball" />
- <asp:ListItem Value="FB" Text="Football" />
- </asp:RadioButtonList>
- </td>
- <td>
- <asp:RadioButtonList ID="rbList2" runat="server" TextAlign="right" RepeatDirection="Vertical" RepeatLayout="Table">
- <asp:ListItem Value="1" Text="1st" />
- <asp:ListItem Value="2" Text="2nd" />
- <asp:ListItem Value="3" Text="3rd" />
- <asp:ListItem Value="4" Text="4th" />
- </asp:RadioButtonList>
- </td>
- <td>
- <asp:RadioButtonList ID="rbList3" runat="server" RepeatDirection="Vertical" TextAlign="right">
- <asp:ListItem Value="C" Text="Coach" />
- <asp:ListItem Value="GM" Text="General Manager" />
- </asp:RadioButtonList>
- </td>
- <td>
- <asp:RadioButtonList ID="rbList4" runat="server" RepeatDirection="Vertical" TextAlign="right" >
- <asp:ListItem Value="H" Text="Home" />
- <asp:ListItem Value="A" Text="Away" />
- </asp:RadioButtonList>
- </td>
- </tr>
- <tr><td> </td></tr>
- <tr><td><button type="button" onclick="ClearSel('')">Clear</button></td></tr>
- <tr><td><button id="btnSave" type="button" data-dismiss="modal">Save</button></td></tr>
- </table>
This is the jquery I have so far. It just disables the save button.
- <script type="text/javascript">
- $(document).ready(function () {
- var button = $('#btnSave').prop('disabled', true);
- });
- </script>
Any help pointing me in the right direction would be very appreciated.