Using not() to affect all but selected checkbox

Using not() to affect all but selected checkbox

I have a series of checkboxes that is generated by a CMS, so I have limited control over what the HTML looks like. Here's a chunk:

  1. <div id="topping_control">
  2. <div class="multiSelect">
  3.   <div class="title">
  4. Select Toppings
  5.   </div>

  6.   <div class="group">
  7. <div>
  8.  <div class="checkBox">
  9. <input type="checkbox" name="toppings" class="PI P" value="N">
  10.  </div>Pineapple
  11. </div>

  12. <div>
  13.  <div class="checkBox">
  14. <input type="checkbox" name="toppings" class="XC C" value="X">
  15.  </div>Extra Cheese *
  16. </div>

  17. <div>
  18.  <div class="checkBox">
  19. <input type="checkbox" name="toppings" class="XS S" value="m">
  20.  </div>Extra Sauce
  21. </div>

  22. <div>
  23.  <div class="checkBox checkBoxSelected">
  24. <input type="checkbox" name="toppings" class="no_submit C" checked="checked" value="">
  25.  </div>Regular Cheese
  26. </div>

  27. <div>
  28.  <div class="checkBox checkBoxSelected">
  29. <input type="checkbox" name="toppings" class="no_submit S" value="" checked="checked">
  30.  </div>Regular Sauce
  31. </div>
  32.   </div>
  33. </div>
  34. </div>
The Regular Cheese and Regular Sauce options are checked by default. I need to find a way to automatically deselect all other cheese options if any cheese option is selected; the same with sauce. They are linked together by a class: S for sauce and C for cheese. (I've stripped out a lot of the options; in the actual code there are numerous checkboxes with C, and an equal number with S.)

So if the user checks Extra Cheese, Regular Cheese must be deselected. If they then go back and check Regular Cheese, Extra Cheese must be deselected. Only one of each class may be selected at any given time. Complicating the matter is that it's not just the "checked" property of the actual input that needs to be removed; we also need to remove the checkBoxSelected class from the parent div.

We're using a custom object, so in the following code, the control variable is defined, and the checkbox variable returns the div with the checkBox class. It works to deselect elements correctly, but it then seems to also prevent any of the cheese items from being clicked again, even if none are currently selected.

  1. if (checkbox.find('input').hasClass('C')) {
  2. $('.C').not(this).each(function(){
  3. $(this).parent("div").removeClass('checkBoxSelected');
  4. $(this).removeAttr('checked');
  5. });
  6. }

Can anyone point out what I'm doing wrong? I'm primarily a php developer, so I'm not terribly proficient with javascript or jquery.