Limiting total qty of custom options and making checkboxes mutually excludable

Question

what I am trying to make is a make-your-own-pizza configurator. Basically I have setup a simple product (the pizza) and I have added a variety of custom options as toppings. The problem is that there are around 10 toppings but I would like to limit the total amount a customer can pick to about 5 (the pizza won't bake really well with 10).

Since I didn't find such function in magento I used JS to do that. Basically once you select more than 5 checkboxes you receive the following message which works perfectly. (I used this post: how I can limit the maximum selectable simple products?)

var maxCheckedCount = <? php echo $maxCheckedCount = $this - > getProduct() - > getMaxCheckedCount(); ?> +1;
 var maxCheckedAlertMessage = "<?php echo $this->__('You have reached maximum allowed selections.'); ?>";

 jQuery('input[type=checkbox]').click(function () {
     var n = jQuery('input:checked').length;
     if (n >= maxCheckedCount) {
         jQuery(this).prop('checked', false);
         alert(maxCheckedAlertMessage);
     }
 });

The difficult part, however is making the checkboxes mutually exclusive, for example, we have two checkboxes per topping: single and double. When I click double and I have selected single before that, I would like it to get unselected. I am not using radio buttons because I would like the customer to be able to unselect his choice without clicking anything else and I think it might conflict with the script above.

I've used the following code:

$("#idofsingle").click(function() {
        if($("#idofsingle").is(':checked')) {
            $("#idofdouble").prop('checked', false);
        }
    });
    $("#idofdouble").click(function() {
        if($("#idofdouble").is(':checked')) {
            $("#idofsingle").prop('checked', false);
        }
    });

It works alright in a simple environment but in magento I reckon it should pick the ID's of the checkboxes using php which I am not able to do. Any hints?

Thanks in advance!

Answer 1

You should probably define a mapping - maybe just in your javascript for simplicity - to identify which custom options are mutually exclusive.

optionGroups = [
    [1, 2],
    [3, 5, 7]
]

Where those numbers correspond to the custom option IDs. One thing to keep in mind though if you go that route is that, if you ever delete and recreate a custom option, the IDs will change, which can be a hassle.

Also keep in mind that if you try to go this route, you'll run into issues if you try to add these custom options to a different product, because those custom option instances will have different ID numbers.

Then, once you have this mapping, you can just loop over them in the click() event, and if one of the checkboxes in a group is selected, then unselect it.