Using JQuery Select only one checkbox in ASP.Net Repeater Control

When a Checkbox is used inside a ASP.Net Repeater control then many times we need that on selecting a checkbox only one checkbox should be checked.

When a Checkbox is used inside a ASP.Net Repeater control then many times we need that on selecting a checkbox only one checkbox should be checked.

For this you can make use of JQuery to loop through all ASP.Net Repeater items and uncheck checkboxes. Check this example using ASP.Net Repeater control with making use of JQuery.

ASPX CODE

<table id="RepeaterTable">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:CheckBox ID="cbSelect" runat="server" onclick="toggleSelectionRepeater(this);"
                            Text="Select" />
                             <asp:Label ID="lblLeaveID" runat="server" Text='<% #Eval("leaveID") %>' ></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>

Bind Grid

private void BindLeave()
    {
        DataTable dt = HREmpLeave.GetSearch(null, null, null, null, true, null, null, null, null).Tables[0];
        try
        {
            if (dt.Rows.Count > 0)
            {
                Repeater1.DataSource = dt;
                Repeater1.DataBind();
            }
            else
            {
                Repeater1.DataSource = null;
                Repeater1.DataBind();
            }
        }
        catch (Exception oException)
        {
            oException.Message.ToString();
        }
        finally
        {
            dt = null;
        }
    }
Page_Load

if (!IsPostBack)
{
      BindLeave();
}

JQuery Script

<script type="text/javascript" src="Script/jquery-1.5.1min.js"></script>

    <script type="text/javascript" language="javascript">
        function toggleSelectionRepeater(source) {
            var isChecked = source.checked;
            $("#RepeaterTable input[id*='cbSelect']").each(function(index) {
                $(this).attr('checked', false);
            });
            source.checked = isChecked;
        }      
  
    </script>

SQL TABLE

ET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[HREmpLeave](
[leaveID] [int] IDENTITY(1,1) NOT NULL,
[leaveName] [varchar](50) NULL,
[isPaid] [bit] NULL,
[days] [float] NULL,
[isActive] [bit] NULL,
[createdBy] [varchar](50) NULL,
[createdOn] [datetime] NULL,
[modifiedBy] [varchar](50) NULL,
[modifiedOn] [datetime] NULL,
[leaveCode] [varchar](10) NULL,
CONSTRAINT [PK_HRLeave_1] PRIMARY KEY CLUSTERED
(
[leaveID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


SQL Store Procedure

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[gspHREmpLeave_SEARCH]
(
@leaveID int = null,
@leaveName varchar(50) = null,
@isPaid bit = null,
@days float = null,
@isActive bit = null,
@createdBy varchar(50) = null,
@createdOn datetime = null,
@modifiedBy varchar(50) = null,
@modifiedOn datetime = null
)
AS

SELECT
*
FROM
[dbo].[HREmpLeave]
WHERE
(@leaveID IS NULL OR [leaveID] = @leaveID)
AND
(@leaveName IS NULL OR @leaveName = '' OR [leaveName] LIKE @leaveName + '%')
AND
(@isPaid IS NULL OR [isPaid] = @isPaid)
AND
(@days IS NULL OR [days] = @days)
AND
(@isActive IS NULL OR [isActive] = @isActive)
AND
(@createdBy IS NULL OR @createdBy = '' OR [createdBy] LIKE @createdBy + '%')
AND
(@createdOn IS NULL OR [createdOn] = @createdOn)
AND
(@modifiedBy IS NULL OR @modifiedBy = '' OR [modifiedBy] LIKE @modifiedBy + '%')
AND
(@modifiedOn IS NULL OR [modifiedOn] = @modifiedOn)