title: Select only one checkbox in a group
body: <p>I have a lot of the same <code>&lt;div class="checkbox product-option"&gt;</code>, where each four div's do belong to each other.</p>
  
  <p>So 1-4 is a group, 5-8 is a group etc.</p>
  
  <p>Is there a way to allow only 1 checkbox in a group to be selected?</p>
  
  <p>I currently have this code, but that works for all checkbox and not for a group of four. </p>
  
  <p>jQuery: </p>
  
  <pre><code>$('input[type="checkbox"]').on('change', function() {
     $('input[type="checkbox"]').not(this).prop('checked', false);
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="checkbox product-option"&gt;
      &lt;label for="addon1"&gt;
          &lt;span class="product-option-text"&gt;
              &lt;input class="checkbox-row" type="checkbox" name="addons[1]" id="addon1" onclick="prodconfrecalcsummary()"&gt;
              &lt;span class="text"&gt;Text&lt;/span&gt;
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="checkbox product-option"&gt;
      &lt;label for="addon11"&gt;
          &lt;span class="product-option-text"&gt;
              &lt;input class="checkbox-row" type="checkbox" name="addons[11]" id="addon1" onclick="prodconfrecalcsummary()"&gt;
              &lt;span class="text"&gt;Text&lt;/span&gt;
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="checkbox product-option"&gt;
      &lt;label for="addon12"&gt;
          &lt;span class="product-option-text"&gt;
              &lt;input class="checkbox-row" type="checkbox" name="addons[21]" id="addon1" onclick="prodconfrecalcsummary()"&gt;
              &lt;span class="text"&gt;Text&lt;/span&gt;
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="checkbox product-option"&gt;
      &lt;label for="addon54"&gt;
          &lt;span class="product-option-text"&gt;
              &lt;input class="checkbox-row" type="checkbox" name="addons[54]" id="addon1" onclick="prodconfrecalcsummary()"&gt;
              &lt;span class="text"&gt;Text&lt;/span&gt;
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>