title: Deselect Radio Button if another one is selected
body: <p>Considering the following markup:</p>
  
  <pre><code>&lt;form&gt;
  
  &lt;div class="project"&gt;
  &lt;ul class="choice"&gt;
      &lt;li&gt;&lt;label for="firstchoice_1"&gt;First choice&lt;/label&gt;&lt;input type="radio" name="firstchoice" value="1" id="firstchoice_1" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label for="secondchoice_1"&gt;Second choice&lt;/label&gt;&lt;input type="radio" name="secondchoice" value="1" id="secondchoice_1" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="project"&gt;
  &lt;ul class="choice"&gt;
      &lt;li&gt;&lt;label for="firstchoice_2"&gt;First choice&lt;/label&gt;&lt;input type="radio" name="firstchoice" value="2" id="firstchoice_2" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label for="secondchoice_2"&gt;Second choice&lt;/label&gt;&lt;input type="radio" name="secondchoice" value="2" id="secondchoice_2" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>What I want to do is to disable one if the radio button in every <code>.project</code> group whenever the other one was selected (so only <code>First choice</code> or <code>Second choice</code> in every group can be selected). What I know how to do is to disable one specific radio button in one specific case but I don't know how to generalize this as they may are a hundred of such <code>.project</code> groups.</p>
  
  <p><strong>Edit</strong>: Please note that only of the whole <code>First choice</code> (and vice versa) can be selected. The same name is already used for that one. The same <code>name</code> attribute is used throughout the whole markup. There are only two different <code>name</code>s.</p>