Disable One RadioButtonList Based on Selection in Another RadioButtonList in SharePoint 2010

Greetings All,

I have been struggling with controlling some behavior of radio button lists in a data form web part attached to a list in SharePoint 2010. I have 2 radio button lists, each with 2 choices, Yes (true) and No (false). I need to make it so that if Yes is selected in one list then the No is automatically selected in the other OR the other list is disabled would work too. I've seen a lot of jquery suggestions out there and have tried them but I don't think I'm capturing the right ID for the lists since Sharepoint rewrites those into that strange long string of characters.

Here is the code for my lists:

<asp:RadioButtonList runat="server" id="ff5{$Pos}" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@HRA')}" RepeatDirection="Horizontal">
<asp:ListItem Value="True" style="margin-right:250px"><span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the Health Reimbursement Account (HRA).</span></asp:ListItem>
<asp:ListItem Value="False"><span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the Health Reimbursement Account (HRA).</span></asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList runat="server" id="ff6{$Pos}" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@HSA')}" RepeatDirection="Horizontal">
<asp:ListItem Value="True" style="margin-right:220px"><span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span></asp:ListItem>
<asp:ListItem Value="False"><span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span></asp:ListItem>
</asp:RadioButtonList>

Open in new window

Any help with this would be greatly appreciated. Thanks.

Justin Pilditch

You don't have to use the element ID as a selector, you can use name, class or type or combine them to enable an accurate selection:

$('question') - element with this name e.g. <input name='question' />
$('.question') - elements with a class="question"
$('input:radio') - all radio items
$('input:radio.question') - only radio items with class="question"

and so on...

Here's a quick example I knocked up where I chose to give your radio items a name as a means of selecting them as I could not see how your Ids were being generated. Remember, being a radio group, both true and false of each question have the same name.

Select YES in the first and NO is selected in the second and vice versa.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">

		$(document).ready(function(){

			$('input:radio[name=first_choice]').click(function () {
				// get value of radio button that is checked
				if( $('input:radio[name=first_choice]:checked').val() === "true") {
					// q1 = yes, set q2 = no
					$('input:radio[name=second_choice]:nth(1)').attr('checked', 'checked');
				}
				else{
					// q1 = no, set q2 = yes
					$('input:radio[name=second_choice]:nth(0)').attr('checked', 'checked');
				}

			});
			
			$('input:radio[name=second_choice]').click(function () {

				if( $('input:radio[name=second_choice]:checked').val() === "true") {
					$('input:radio[name=first_choice]:nth(1)').attr('checked', 'checked');
				}
				else{
					$('input:radio[name=first_choice]:nth(0)').attr('checked', 'checked');
				}

			});

		});

	</script>

	<style type="text/css">
		div{
		    font-family: verdana, helvetica, arial;
		    font-size: 10px;
		}

		.outer{
		    padding: 5px;
		    margin: 5px;
		}

		.title{
		    width: 100%;
		    margin-bottom: 10px;
		}

		.inner{
		    padding: 10px 0 0 20px;
		}
	</style>
	
</head>
<body>
	<div id="outer">

	    <div class="inner">
	        <input type="radio" value="true" name="first_choice" /><span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the Health Reimbursement Account (HRA).</span><br/>
	        <input type="radio" value="false" name="first_choice" /><span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the Health Reimbursement Account (HRA).</span>
	        <br/><br/>
	        <input type="radio" value="true" name="second_choice" /><span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span><br/>
	        <input type="radio" value="false" name="second_choice" /><span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span><br/>
	    </div>
	</div>
</body>
</html>

Open in new window

Russell Scheinberg, MCSE Business Intelligence

ASKER

I appreciate your help but still can't seem to get it to work. Because it is a Sharepoint data form web part, it automatically generates the id and names for the inputs.

Here is the code that I used based on your suggestion:

$(document).ready(function(){
		$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new]').click(function () {
			// get value of radio button that is checked
			if( $('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new]:checked').val() === "true") {
				// q1 = yes, set q2 = no
				$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new]:nth(1)').attr('checked', 'checked');
			}
			else{
				// q1 = no, set q2 = yes
				$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new]:nth(0)').attr('checked', 'checked');
			}
		});			
		$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new]').click(function () {
			if( $('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new]:checked').val() === "true") {
				$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new]:nth(1)').attr('checked', 'checked');
			}
			else{
				$('input:radio[name=ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new]:nth(0)').attr('checked', 'checked');
			}

		});

	});

Open in new window

And here is the radiobuttonlist code that is generated in SharePoint:

<tr>
   <td colspan="99" style="padding:0px 0px 10px 80px">
      <table id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new" border="0">
         <tr>
            <td>
               <span style="margin-right:250px">
                  <input id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_0" type="radio" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new" value="True" />
                  <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_0">
                     <span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the Health Reimbursement Account (HRA).</span>
                  </label>
               </span>
            </td>
            <td>
               <input id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_1" type="radio" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new" value="False" />
               <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_1">
                  <span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the Health Reimbursement Account (HRA).</span>
               </label>
            </td>
         </tr>
      </table>
   </td>
</tr>
<tr>
   <td colspan="99" style="padding:0px 0px 10px 80px">
      <table id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new" border="0">
         <tr>
            <td>
               <span style="margin-right:220px">
                  <input id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_0" type="radio" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new" value="True" />
                  <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_0">
                     <span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span>
                  </label>
               </span>
            </td>
            <td>
               <input id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_1" type="radio" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new" value="False" />
               <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_1">
                  <span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span>
               </label>
            </td>
         </tr>
      </table>
   </td>
</tr>

Open in new window

As you can see Sharepoint (asp.net) generates some pretty ugly id's and names here. But I can't even see that anything is firing at all when I click on the options when I use the names generated here.

Am I missing something? Obviously I am.

Thanks again.

Justin Pilditch

jQuery can't find the elements on the page with those names - they do not meet W3 standards which, sadly, is no real surprise coming from a Microsoft product!

According to http://www.w3.org/TR/html401/types.html#type-name
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

So I've redone added a class to each button and used that for the selectors:

		$(document).ready(function(){
			$('input:radio.first_choice').click(function () {
				// get value of radio button that is checked
				if( $('input:radio.first_choice:checked').val() === "True") {
					// q1 = yes, set q2 = no
					$('input:radio.second_choice:nth(1)').attr('checked', 'checked');
				}
				else{
					// q1 = no, set q2 = yes
					$('input:radio.second_choice:nth(0)').attr('checked', 'checked');
				}
			});
			
			$('input:radio.second_choice').click(function () {
				if( $('input:radio.second_choice:checked').val() === "True") {
					$('input:radio.first_choice:nth(1)').attr('checked', 'checked');
				}
				else{
					$('input:radio.first_choice:nth(0)').attr('checked', 'checked');
				}

			});

		});

Open in new window

and

		<tr>
		   <td colspan="99" style="padding:0px 0px 10px 80px">
		      <table id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new" border="0">
		         <tr>
		            <td>
		               <span style="margin-right:250px">
		                  <input type="radio" value="True" class="first_choice" id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_0" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new" />
		                  <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_0">
		                     <span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the Health Reimbursement Account (HRA).</span>
		                  </label>
		               </span>
		            </td>
		            <td>
		               <input type="radio" value="False" class="first_choice" id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_1" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff5_new" />
		               <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff5_new_1">
		                  <span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the Health Reimbursement Account (HRA).</span>
		               </label>
		            </td>
		         </tr>
		      </table>
		   </td>
		</tr>
		<tr>
		   <td colspan="99" style="padding:0px 0px 10px 80px">
		      <table id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new" border="0">
		         <tr>
		            <td>
		               <span style="margin-right:220px">
		                  <input type="radio" value="True" class="second_choice" id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_0" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new" />
		                  <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_0">
		                     <span style="vertical-align:middle"><b>Yes.</b> I wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span>
		                  </label>
		               </span>
		            </td>
		            <td>
		               <input type="radio" value="False" class="second_choice" id="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_1" name="ctl00$ctl17$g_be1202b4_d185_4a07_864b_584461701194$ff6_new" />
		               <label for="ctl00_ctl17_g_be1202b4_d185_4a07_864b_584461701194_ff6_new_1">
		                  <span style="vertical-align:middle"><b>No.</b> I <u><b>DO NOT</b></u> wish to participate in the <i>Health Equity</i> Health Savings Account (HSA).</span>
		               </label>
		            </td>
		         </tr>
		      </table>
		   </td>
		</tr>

Open in new window

Russell Scheinberg, MCSE Business Intelligence

ASKER

I think this is related to the way sharepoint renders the code. I cannot put a class on either the radiobuttonlist tag nor on the list items. When I do, sharepoint renders the code such that the class goes on that table tag (if I add it to the button list) or the span tag (if I add it to each of the ListItems). Input tags still only have the funky long id and names. It would seem that there must be a way to access the list items but I haven't found it. I do appreciate your help.

ASKER CERTIFIED SOLUTION

Justin Pilditch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Russell Scheinberg, MCSE Business Intelligence

ASKER

Awesome!! That did it. Only one list can now have Yes selected. Thanks so much.