title: Need help changing/unchanging checkbox label opacity with javascript
body: <p>I have a series of 8 checkboxes. Each checkbox has its own label, and the labels have a single background color. I need to add a new class that will change the opacity of any checkboxes that are selected, and then change the opacity back to the original opacity if the user deselects the checkbox(es). I have set up a fiddle where I add a class to the parent element when a checkbox is selected, but it's not exactly what I need. You will see that it adds the class to the top-level div instead of to the individual checkbox div containers.</p>
  
  <p><a href="http://jsfiddle.net/AftyD/1/" rel="nofollow">http://jsfiddle.net/AftyD/1/</a></p>
  
  <pre><code>.red {
  background-color:red;
  }
  .opaque {
  opacity: 0.5;
  }
  
  
  
  &lt;div class="form-checkboxes" id="edit-submitted-click-the-looks-you-would-wear"&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Boho"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Boho" name="submitted[click_the_looks_you_would_wear][Boho]" id="edit-submitted-click-the-looks-you-would-wear-1"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-1" class="option"&gt;&lt;span class="red"&gt;Label 1&lt;/span&gt; 
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Classic"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Classic" name="submitted[click_the_looks_you_would_wear][Classic]" id="edit-submitted-click-the-looks-you-would-wear-2"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-2" class="option"&gt;&lt;span class="red"&gt;Label 2&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Earthy"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Earthy" name="submitted[click_the_looks_you_would_wear][Earthy]" id="edit-submitted-click-the-looks-you-would-wear-3"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-3" class="option"&gt;&lt;span class="red"&gt;Label 3&lt;/span&gt; 
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Fashionista"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Fashionista" name="submitted[click_the_looks_you_would_wear][Fashionista]" id="edit-submitted-click-the-looks-you-would-wear-4"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-4" class="option"&gt;&lt;span class="red"&gt;Label 4&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Feminine"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Feminine" name="submitted[click_the_looks_you_would_wear][Feminine]" id="edit-submitted-click-the-looks-you-would-wear-5"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-5" class="option"&gt;&lt;span class="red"&gt;Label 5&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Nautical"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Nautical" name="submitted[click_the_looks_you_would_wear][Nautical]" id="edit-submitted-click-the-looks-you-would-wear-6"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-6" class="option"&gt;&lt;span class="red"&gt;Label 6&lt;/span&gt; 
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sophisticated"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Sophisticated" name="submitted[click_the_looks_you_would_wear][Sophisticated]" id="edit-submitted-click-the-looks-you-would-wear-7"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-7" class="option"&gt;&lt;span class="red"&gt;Label 7&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sporty"&gt;
      &lt;input type="checkbox" class="form-checkbox" value="Sporty" name="submitted[click_the_looks_you_would_wear][Sporty]" id="edit-submitted-click-the-looks-you-would-wear-8"&gt;
      &lt;label for="edit-submitted-click-the-looks-you-would-wear-8" class="option"&gt;&lt;span class="red"&gt;Label 8&lt;/span&gt; 
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>(function ($) {
  
  $(document).ready(function ($) {
      $(".form-checkboxes").find('input').click(function () {
          if ($(this).is(":checked")) $(this).parent().parent().addClass('opaque')
          else $(this).parent().parent().removeClass('opaque')
      });
  });
  
  }(jQuery));
  </code></pre>
  
  <p>Can someone take a look and let me know how I can accomplish this? It's for a Drupal 7 website, so I can't change much in the HTML portion of the fiddle.</p>
  
  <p>Thanks!</p>