In ASP.NET, it is possible to only select a single checkbox at a time within a row in a GridView

I have a project where checkboxes are generated dynamically at runtime. I want users to be able to select only one checkbox at a time in each row. Here is my Gridview:

<cc1:Grid ID="GrdWorkingCompany" runat="server" OnRowDataBound="GrdWorkingCompany_RowDataBound" EnableTypeValidation="true" CallbackMode="true" Serialize="true" ShowFooter="false" AutoGenerateColumns="false" AllowAddingRecords="true" AllowSorting="false"
Width="100%" FolderStyle="~/Styles/Grid/style_12" PageSize="18">
  <Columns>
    <cc1:Column ID="Sr_No" ReadOnly="true" DataField="SrNo" HeaderText="Sr.No." Width="50px">
    </cc1:Column>
    <cc1:Column ID="Points" ReadOnly="true" DataField="Points" HeaderText="Points" runat="server" Width="300px">
    </cc1:Column>
    <cc1:Column ID="chkPoor" ReadOnly="true" DataField="Rating1" HeaderText="Poor" Width="110px" TemplateId="tpltPoor">
    </cc1:Column>
    <cc1:Column ID="chkSatisfactory" DataField="Rating2" HeaderText="Satisfactory" ReadOnly="true" Width="110px" TemplateId="tpltSatisfactory">
    </cc1:Column>
    <cc1:Column ID="chkGood" ReadOnly="true" HeaderText="Good" DataField="Rating3" Width="110px" TemplateId="tpltGood">
    </cc1:Column>
    <cc1:Column ID="chkExcellent" HeaderText="Excellent" DataField="Rating4" Width="110px" ReadOnly="true" TemplateId="tpltEx1">
    </cc1:Column>
  </Columns>
  <TemplateSettings GroupHeaderTemplateId="GroupTemplate" />
  <Templates>
    <cc1:GridTemplate runat="server" ID="GridTemplate2">
      <Template>
        <%# Container.Column.HeaderText %>
          : <i>
                                                        <%# Container.Value %></i> (
          <%# Container.Group.PageRecordsCount %>
            <%# Container.Group.PageRecordsCount>1 ? "records" : "record" %>)
      </Template>
    </cc1:GridTemplate>
  </Templates>
  <Templates>
    <cc1:GridTemplate ID="tpltPoor">
      <Template>
        <asp:CheckBox runat="server" Checked='<%# Container.DataItem["Poor"].ToString() == "1" ? true : false %>' value="testing" CssClass="chkclass" onclick="AppoveCheckA(this)" ID="ChkID" ToolTip="<%# Container.Value %>" />
      </Template>
    </cc1:GridTemplate>
    <cc1:GridTemplate ID="tpltSatisfactory">
      <Template>
        <asp:CheckBox runat="server" Checked='<%# Container.DataItem["Satisfactory"].ToString() == "1" ? true : false %>' value="testing" CssClass="chkclass" onclick="AppoveCheckA(this)" ID="ChkID" ToolTip="<%# Container.Value %>" />
      </Template>
    </cc1:GridTemplate>
    <cc1:GridTemplate ID="tpltGood">
      <Template>
        <asp:CheckBox runat="server" Checked='<%# Container.DataItem["Good"].ToString() == "1" ? true : false %>' value="testing" CssClass="chkclass" onclick="AppoveCheckA(this)" ID="ChkID" ToolTip="<%# Container.Value %>" />
      </Template>
    </cc1:GridTemplate>
    <cc1:GridTemplate ID="tpltEx1">
      <Template>
        <asp:CheckBox runat="server" Checked='<%# Container.DataItem["Excellent"].ToString() == "1" ? true : false %>' value="testing" CssClass="chkclass" onclick="AppoveCheckA(this)" ID="ChkID" ToolTip="<%# Container.Value %>" />
      </Template>
    </cc1:GridTemplate>
  </Templates>
</cc1:Grid>

I have tried some code, but it is not working. Here is my JavaScript code:

<script type="text/javascript">
    $('input.chk').on('change', function () {
        $('input.chk').not(this).prop('checked', false);
    });
</script>

Please provide any suggestions. Thank you.

Answer №1

Looks like your selector needs a correction. None of your elements are assigned a class name of chk. The correct class to use is chkClass:

$('input.chkClass').on('change', function () {
  $('input.chkClass').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" class="chkClass">
<input type="checkbox" class="chkClass">
<input type="checkbox" class="chkClass">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to efficiently calculate totals in an HTML table using JavaScript/jQuery

I have a gridview that displays product details and includes a quantity textbox that is not linked to any database. For each row, I want it to show the cost (price * quantity) and the total cost for all rows in a label below. However, I am encountering a f ...

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

Determining When to Activate Button Based on Angular - Verifying That All Choices Have Been Ch

This quiz application requires the user to choose options before proceeding to the next page, with the next button being disabled by default. Once all options are chosen, the next button should become enabled. NOTE: Although the functionality for selecti ...

The Javascript Switch statement is experiencing some functional issues

I am facing an issue where I need to handle different scenarios based on a decimal value, and I thought of using a Switch/case statement for this purpose. However, the code is not working as expected. Below is the snippet of code in question: var spread ...

Saving the current date in MongoDB using the save method

Is there a way to have MongoDB automatically populate a field with the current UTC DateTime when saving a document? I'm aware of the $currentDate operator, but it seems to only be accessible within the update method. ...

Unexpected behavior encountered when using onClick in a material-ui List component containing Buttons

Looking to implement a customized list using React and Material-UI, where each item features a Checkbox, a text label, and a button. The onClick event for the Checkbox should be managed by a separate function from the onClick event for the Button. Encount ...

What causes a browser to redirect when trying to update the value of the alt field in a Wordpress media image?

Attempting to create a bookmarklet for the Wordpress image gallery manager that triggers the sidebar when an image is clicked. The sidebar contains fields for alt text (input), legend, and description (both textarea). <a href="javascript:var t=document ...

"Learn how to smoothly navigate back to the top of the page after a specified amount of time has

Just starting out with JS, CSS, and Stack Overflow! I'm currently working on a div box that has the CSS property overflow: auto. Is it possible to make the box automatically scroll back to the top after a certain amount of time when the user scrolls ...

Ways to dynamically incorporate input fields into a form

My current project involves managing an Asset Management system for a company with multiple locations. This system has the capability to return unused asset items back to storage. I am faced with the task of returning a large number of items, which requi ...

applying a timeout for the .on(load) event

My goal is to dynamically load images using .on('load') in the script below: .on('load', function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken i ...

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

My table of data is set up with AngularJS, and one of the columns is calculated using a function in the controller. On my webpage, I have a button that opens a modal. When I use UI Bootstrap to open the modal, it creates a new isolated scope (child of the ...

Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

Just starting out with AngularJS We are using REST APIs to access our data /shop/2/mum This URL returns JSON which can be bound like so: function ec2controller($scope, $http){ $http.get("/shop/2/mum") .success(function(data){ ...

Unable to send a post request using ajax

Section of Form in home.php <div id='googleForm'> <form> <div class='item'> <label class='label'>Full Name</label> <input class=&apos ...

Enhance jQuery dataTable with live updates from Firestore querySnapshot

Currently, I have implemented jQuery dataTable in my project to display data from Firestore. While everything seems to be working fine, an alert keeps popping up in the browser whenever there is an update in the Firestore data: DataTables warning: table i ...

Why won't the Dynamic RadioButton in C# Update Panel fire on initial click?

I am facing an issue with dynamically created radio buttons inside a loop and added to a div within an update panel. Whenever a postback request is triggered by the checked change event, I have to recreate the radio buttons in my page_init method. However, ...

Utilize jQuery to swiftly align elements within a designated container

Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container ...

Tips for integrating jwt token into axios request

I am facing an issue with my backend endpoint. I can successfully retrieve a list of customers using jwt token on Postman, but when I try to fetch the list from a React app using axios get request, it fails. After reading through this question, I implemen ...

JavaScript - Global Variable

Is it possible to declare and assign a value to a global variable in one JavaScript file and then reference it in another JavaScript file multiple times? Can Angular.js be utilized in a Velocity macro file, aside from HTML files? ...

Instructions on activating dark mode with the darkreader plugin on a Vue.js website

Is there a way to implement DarkMode in a Vue.js application? I attempted to integrate darkmode using this npm package, but I kept encountering the error message: DarkMode not defined. ...

Tips to prevent elements from overlapping in Angular applications

I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. ...