Untick checkboxes within a span of same name

Andy Green
Andy Green used Ask the Experts™
on
Hi

I have a set of checkboxes (within a grid item template), and because of the way the page is I can't use a radio button.

I want to be able to only have ticked at a time.

So far I have added a class - chkPri.Attributes.Add("class", [String].Format("diags"))

and tried this jQuery - $('input.diags').not(this).prop('checked', false);

but the page is being rendered with the input inside a span with the class added to the span.

<span class="diags">

<input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl07$chkPrimary" id="rpbOutcomes_i1_rgProcedures_ctl00_ctl07_chkPrimary" onclick="setDiags(this);" type="checkbox">

</span>

I have tried using inutAttribute but this wasn't being rendered.

I have also tried $("span[class='diags']").not(this).prop('checked', false); this finds the span but not the checkbox inside it.

Can anyone point me in the right direction.

Simply put I only want one checkbox to be ticked. The checkboxes are inside a grid.

Andy
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Are these the only checkboxes on the whole page? Can you provide a rendered page in html code?

Author

Commented:
No I have 3 groups of checkboxes, its only these 1 set I want to control like this.

In the itemdatabound I'm adding the chkPri.Attributes.Add("class", [String].Format("diags")) so only this 1 set have the diag class attribute.

This is the html for the section:

<table class="rgMasterTable" id="rpbOutcomes_i1_rgProcedures_ctl00" style="width: 100%; table-layout: auto; empty-cells: show;" border="0">
	<colgroup>
		<col style="width: 20px;">
		<col style="display: none;">
		<col>
		<col style="width: 65px;">
		<col>
	</colgroup>
<thead>
		<tr>
			<th class="rgHeader rgGroupCol" scope="col">&nbsp;</th><th class="rgHeader" style="display: none;" scope="col">&nbsp;</th><th class="rgHeader" scope="col">Description</th><th class="rgHeader" style="text-align: center;" scope="col">Code</th><th class="rgHeader" style="text-align: center;" scope="col">&nbsp;</th>
		</tr>
	</thead><tbody>
	<tr class="rgGroupHeader">
		<td class="rgGroupCol"><input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl04$ctl00" class="rgCollapse" id="rpbOutcomes_i1_rgProcedures_ctl00__2__0" onclick="javascript:__doPostBack('rpbOutcomes$i1$rgProcedures$ctl00$ctl04$ctl00','')" type="button" value=" "></td><td colspan="3"><p>Diagnosis Codes</p></td>
	</tr><tr class="rgRow" id="rpbOutcomes_i1_rgProcedures_ctl00__0" style="background-color: rgb(255, 214, 102);">
		<td class="rgGroupCol">&nbsp;</td><td style="display: none;">624</td><td valign="top">Diag 002</td><td align="center" valign="top">D002</td><td align="center">
                                                                            <span class="diags"><input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl05$chkPrimary" id="rpbOutcomes_i1_rgProcedures_ctl00_ctl05_chkPrimary" onclick="setDiags(this);" type="checkbox"></span>
                                                                        </td>
	</tr><tr class="rgAltRow" id="rpbOutcomes_i1_rgProcedures_ctl00__1">
		<td class="rgGroupCol">&nbsp;</td><td style="display: none;">622</td><td valign="top">Diagnotic 001</td><td align="center" valign="top">DIA001</td><td align="center">
                                                                            <span class="diags"><input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl07$chkPrimary" id="rpbOutcomes_i1_rgProcedures_ctl00_ctl07_chkPrimary" onclick="setDiags(this);" type="checkbox"></span>
                                                                        </td>
	</tr><tr class="rgGroupHeader">
		<td class="rgGroupCol"><input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl09$ctl00" class="rgExpand" id="rpbOutcomes_i1_rgProcedures_ctl00__7__0" onclick="javascript:__doPostBack('rpbOutcomes$i1$rgProcedures$ctl00$ctl09$ctl00','')" type="button" value=" "></td><td colspan="3"><p>Investigation Codes</p></td>
	</tr><tr class="rgGroupHeader">
		<td class="rgGroupCol"><input name="rpbOutcomes$i1$rgProcedures$ctl00$ctl12$ctl00" class="rgExpand" id="rpbOutcomes_i1_rgProcedures_ctl00__10__0" onclick="javascript:__doPostBack('rpbOutcomes$i1$rgProcedures$ctl00$ctl12$ctl00','')" type="button" value=" "></td><td colspan="3"><p>Treatment Codes</p></td>
	</tr>
	</tbody>

</table>

Open in new window



Don't think is has copied everything  View source doesn't capure everything, this was taken from IE developer tools, but it too has missed some stuff.
Multitechnician
Top Expert 2014
Commented:
Test page : http://jsfiddle.net/6PhsZ/1/

jQuery(function($) {
    $(".diags :checkbox").change(function() {
        if($(this).is(":checked")) {
            $(".diags :checkbox").not(this).removeAttr("checked");
        }
    });
});

Open in new window

Author

Commented:
Excellent, thank you.

Andy

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial