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.
Russell Scheinberg, MCSE Business IntelligenceSr. Business Intelligence AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MurfurFull Stack DeveloperCommented:
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

0
Russell Scheinberg, MCSE Business IntelligenceSr. Business Intelligence AnalystAuthor Commented:
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.
0
MurfurFull Stack DeveloperCommented:
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

0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Russell Scheinberg, MCSE Business IntelligenceSr. Business Intelligence AnalystAuthor Commented:
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.
0
MurfurFull Stack DeveloperCommented:
You should still be able to follow the element hierarchy to create a selector:
I'll test it in the morning (I'm in bed!) but something like:
$('table.class_name input:radio')

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Russell Scheinberg, MCSE Business IntelligenceSr. Business Intelligence AnalystAuthor Commented:
Awesome!! That did it. Only one list can now have Yes selected. Thanks so much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.