How to make gridview checkbox act like radiobutton

Edkch · July 15th, 2011, 01:48 PM

Hi Imar,

My question is how to make checkboxes act like radiobuttons. My scenario is such that I have a GridView with a few columns where two of the columns are checkboxes. How can I make those checkboxes act like radiobuttons? I mean, if lets say checkbox1 of row 1 is checked, then if I check checkbox2 of row 1, then I'd want checkbox1 of that same row to be unchecked. I want to be able to achieve this type of validation on the client side (using javascript) though.

Thanks for the help.

Ed

Imar · July 15th, 2011, 04:02 PM

Hi Ed,

You're probably better off asking future questions like this in a JavaScript or jQuery forum here at p2p.wrox.com as it's a bit beyond the scope of the book, and of what I can typically support on a forum like this.

Anyway, I quickly cooked up an example as I was a bit intrigued in the solution myself.

Edit: See attachment. This forum was eating my code (due to the call to the jQuery library on the Google web site) so I moved it to an attachment.

This jQuery code first assigns some code to the click event of each checkbox. It then wraps "this" (the checkbox) in a jQuery matched set and then use parent().parent() to traverse up from the checkbox through the table cell (td) to the table row (tr).

On the row, it finds all checkboxes and disables them using attr which enables you to set an attribute value on an element. At the item, the clicked checkbox is selected.

This code only fires if the checkbox has just been turned on. Otherwise (e.g. without the if check) you wouldn't be able to unckeck both items anymore (which may be what you want though).

This code assumes the same table structure as in my sample HTML so you may need to modify it a bit to match your HTML.

Cheers,

Imar

Edkch · July 15th, 2011, 07:13 PM

Hi Imar,

Thanks for the reply. I'll try to play with what you had and see if I can make it work with what I have. If not, I'll try to find the right forum to post this question with more details. Thanks again!!

Ed

Imar · July 21st, 2011, 01:18 PM

Hi Ed,

I wrote a quick blog about this solution with a slightly better implementation: the code now uses closest() to find the nearest table row, rather than explicitly using the parent method: http://imar.spaanjaars.com/562/creat...ns-with-jquery

Cheers,

Imar