Radio Button toggle based on other radio button
<p>I am needing to setup 4 forms with radio buttons for a competition, I am wanting to set it up that the selections disable other options, so if you selected A for question 1 then option A is disabled in 2,3 and 4.</p>

<p>I have managed to put something together, but my knowledge is limited so its most likely the longest possible way of doing this and am hoping someone know of a simpler method before I start building the 2 extra forms into it.</p>

<p>I setup a fiddle, <a href="http://jsfiddle.net/2Kc6m/2/" rel="nofollow">http://jsfiddle.net/2Kc6m/2/</a></p>

<p>HTML: </p>

<pre><code>    &lt;form id="answer1" class="radioOptions"&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="A1" name="question1" /&gt; A&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="B1" name="question1" /&gt; B&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="C1" name="question1" /&gt; C&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="D1" name="question1" /&gt; D&lt;/div&gt;
&lt;/form&gt;
&lt;form id="answer2" class="radioOptions"&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="A2" name="question2" /&gt; A&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="B2" name="question3" /&gt; B&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="C2" name="question3" /&gt; C&lt;/div&gt;
    &lt;div class="formInput"&gt;&lt;input type="radio" value="D2" name="question2" /&gt; D&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>Script:</p>

<pre><code>    $('.answerOptions').click(function(){
   if(this.value == 'A1' &amp;&amp; this.checked){
       $('input[value=A2]').prop('disabled', true);
       $('input[value=B2], input[value=C2], input[value=D2]').prop('disabled', false);
   }
   else if(this.value == 'B1' &amp;&amp; this.checked){
       $('input[value=A2], input[value=C2], input[value=D2]').prop('disabled', false);
       $('input[value=B2]').prop('disabled', true);
   }
   else if(this.value == 'C1' &amp;&amp; this.checked){
       $('input[value=C2]').prop('disabled', true);
       $('input[value=A2], input[value=B2], input[value=D2]').prop('disabled', false);  
   }
   else if(this.value == 'D1' &amp;&amp; this.checked){
       $('input[value=A2], input[value=B2], input[value=C2]').prop('disabled', false);
       $('input[value=D2]').prop('disabled', true);  
   }   
   else{
      $('.answerOptions').not(this).prop('checked', false).prop('disabled', false);
   }
});
</code></pre>
