Bootstrap CheckboxPicker ASP.NET
You can apply different text labels to five different checkboxes in ASP.NET Web Forms by setting custom labels for each checkbox using JavaScript. Below is how you can do it:
Solution: Assign Different Labels to Each Checkbox
Modify the script so that each checkbox gets a unique onLabel and offLabel.
Complete ASPX Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YourNamespace.Default" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ASP.NET CheckboxPicker Example</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include Checkbox Picker Plugin -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-checkbox/dist/js/bootstrap-checkbox.min.js"></script>
</head>
<body>
<div class="container mt-4">
<form id="form1" runat="server">
<div class="form-check">
<asp:CheckBox ID="chk1" runat="server" CssClass="form-check-input" />
<label class="form-check-label" for="chk1">Option 1</label>
</div>
<div class="form-check">
<asp:CheckBox ID="chk2" runat="server" CssClass="form-check-input" />
<label class="form-check-label" for="chk2">Option 2</label>
</div>
<div class="form-check">
<asp:CheckBox ID="chk3" runat="server" CssClass="form-check-input" />
<label class="form-check-label" for="chk3">Option 3</label>
</div>
<div class="form-check">
<asp:CheckBox ID="chk4" runat="server" CssClass="form-check-input" />
<label class="form-check-label" for="chk4">Option 4</label>
</div>
<div class="form-check">
<asp:CheckBox ID="chk5" runat="server" CssClass="form-check-input" />
<label class="form-check-label" for="chk5">Option 5</label>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$('#<%= chk1.ClientID %>').checkboxpicker({
html: true,
offLabel: '<span class="fa fa-thumbs-down"></span> Disagree',
onLabel: '<span class="fa fa-thumbs-up"></span> Agree'
});
$('#<%= chk2.ClientID %>').checkboxpicker({
html: true,
offLabel: '<span class="fa fa-times"></span> No',
onLabel: '<span class="fa fa-check"></span> Yes'
});
$('#<%= chk3.ClientID %>').checkboxpicker({
html: true,
offLabel: '<span class="fa fa-minus-circle"></span> Inactive',
onLabel: '<span class="fa fa-check-circle"></span> Active'
});
$('#<%= chk4.ClientID %>').checkboxpicker({
html: true,
offLabel: '<span class="fa fa-clock"></span> Pending',
onLabel: '<span class="fa fa-check"></span> Done'
});
$('#<%= chk5.ClientID %>').checkboxpicker({
html: true,
offLabel: '<span class="fa fa-ban"></span> Blocked',
onLabel: '<span class="fa fa-unlock"></span> Unblocked'
});
});
</script>
</body>
</html>
Explanation:
-
Added 5 Checkboxes (
chk1tochk5):- Each checkbox has a unique onLabel and offLabel.
- The labels include Bootstrap icons (
fa-check,fa-times, etc.) for better UI.
-
Used
chk1.ClientIDto Get the Correct Checkbox ID:- This ensures that the correct ASP.NET Client ID is used in JavaScript.
-
Different Labels for Each Checkbox:
- Checkbox 1: Agree / Disagree
- Checkbox 2: Yes / No
- Checkbox 3: Active / Inactive
- Checkbox 4: Done / Pending
- Checkbox 5: Unblocked / Blocked
0 Comments