Allow only one checkbox to be checked

[Andy333]

Hi,
I have a panel with checkboxes:

<asp:Panel runat="server" ID="pnlMyPanel" GroupingText="My Panel Test" Visible="false">

  <div class="DetailsBoxSetting">
    <asp:CheckBox ID="chk_One" runat="server" CssClass="chk" />
    <asp:Label ID="lbl_one" CssClass="StandardLabel" runat="server">One</asp:Label>
  </div>  
                              
  <div class="DetailsBoxSetting">
    <asp:CheckBox ID="chk_Two" runat="server" CssClass="chk" />
    <asp:Label ID="lbl_Two" CssClass="StandardLabel" runat="server">Two</asp:Label>
  </div> 
                               
</asp:Panel>

I want to allow only one checkbox to be checked .
How do I do that ?
Thank you

 

[Wictorian]

I think you can use radio buttons

 

[thatstooeasyman]

You can achieve this by using a bit of JavaScript/jQuery code. Here's an example:

Add the following code to the page, after the panel:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  $('#<%= pnlMyPanel.ClientID %> input[type="checkbox"]').on('change', function() {
    if ($(this).is(':checked')) {
      $('#<%= pnlMyPanel.ClientID %> input[type="checkbox"]').not(this).prop('checked', false);
    }
  });
});
</script>

This code attaches a change event handler to all checkboxes inside the panel. Whenever a checkbox is checked, it unchecks all other checkboxes in the same panel.

Note that this code requires jQuery. If you're not already using it on your page, you'll need to add it. You can do this by adding the following line to the head section of your page:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Alternatively, you can download jQuery and include it in your project.

Hope this helps!