Recently I was developing a system to create tests and test questions. For these tests our client wanted multiple choice questions. To implement this I decided to have a list of textboxes for the answer text, and a radio button for each textbox to select the correct answer. I knew that a RadioButtonList couldn’t have anything other than a radio button and text, so I went with a repeater.
<asp:Repeater ID="rptRadios" runat="server"> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li> <asp:RadioButton ID="rbRadio" runat="server" GroupName="RadioGroup" /> <asp:TextBox runat="server" ID="txtRadio"></asp:TextBox> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater>Doing it this way caused the group name of each radio button to be inconsistent, because of the repeater. After a while of researching and not finding any good solutions I decided to try changing the group name of the radio buttons using jQuery.
$("input:radio").attr('name', 'RadioGroup');That gave me the radio button functionality that I wanted, but it prevented me from getting the selected radio button on postback. So I decided to just implement the radio button functionality manually.
var radios = $("input:radio"); radios.click(function() { radios.removeAttr('checked'); $(this).attr('checked', 'checked'); return true; });Which gave me the correct functionality and I could still get the selected radio button and textbox on postback. Probably not the most elegant solution, but I couldn’t find any other way to do it.
Also I needed to make sure at least one of the radio buttons was selected so I added a CustomValidator that called a javascript function.
function ValidateRadioButtons(sender, args) { args.IsValid = $("input:radio:checked").size() > 0; }
October 6, 2010 at 10:49 pm
awesome. nice fix. sadly i cannot use js for my mobile WAP solution. this is a blooming nightmare! what a bad oversight aargh.
cheers for the post!
James
December 2, 2010 at 1:50 am
Hey great. You’re right there’s no good solution on net. Other still wrote codebehind code >.<, this is the best solution! Thanks.