Select only one checkbox for product pairings x 3 - php

Question

I am displaying products from my Product database in a table, with a checkbox to select the product that is desired.
Each product has 3 variants or price point options, entered in the database as seperate items for each price point variation.
Code category Description Points Choose your Points
1001-B Logo artwork supplied Basic 4.00 points
1001-S Logo artwork supplied Standard 6.00 points
1001-P Logo artwork supplied Premium 12.00 points
1002-B Logo re-draw to vector Basic 6.00 points
1002-S Logo re-draw to vector Standard 8.00 points
1002-P Logo re-draw to vector Premium 14.00 points
There are 3 price point variations for every product: Basic, Standard and Premium. Each "Product" has the same Product Code. So as above Product: 1001-B is the Basic, 1001-S is the standard and 1001-P is the premium.
So the customer chooses which Price point option they want by selecting the checkbox next to each item.
I am wanting to only allow them to select one price point / product for each product pairing (ie only one of the 3 price points).
So basically to get the checkbox to work like a radio button. I cannot use a radio button because I am using the same name for all of the items in my checkbox array: name="id[]"
echo '<input type="checkbox" name="id[]" value="' . $id . '" /></td>';
How can I achieve this?
I know I can do the following:
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<p> </p>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
$("input:checkbox").click(function() {
if ($(this).attr("checked") === true) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).attr("checked", false);
$(this).attr("checked", true);
} else {
$(this).attr("checked", false);
}
});
But this relies on the fact that name="fooby[1][] name="fooby[2][] etc changes. I cannot do that in my case.
Any ideas?
I have already got the cart aspect of this after the page is submitted resolved so I don't want to make fundamental changes to the checkbox format I have.

Answer 1

WHenever you have repeating modules within a page it's easy to isolate instances by traversing up to a main parent of the instance and searching within that parent only.
HTML
<div class="product">
<div class="name"/>
<div class="description/>
<div class="choices">
<input type="checkbox"/>
</div>
</div>
JS:
$('.product input:checkbox').change(function(){
if(this.checked){
$(this).closest('.choices').find('input:checkbox').not(this).prop('checked',false);
}
});
No knowledge of any properties of the checkboxes is required using this generic traverse pattern. If checkbozes aren't wrapped in labels can shorten to:
$(this).siblings().prop('checked',false);

Answer 2

Let's add class attribute to each group and handle with it:
<input type="checkbox" value="1B" name="id[]" class="group1" />
<input type="checkbox" value="1S" name="id[]" class="group1" />
<input type="checkbox" value="1P" name="id[]" class="group1" />
<p> </p>
<input type="checkbox" value="2B" name="id[]" class="group2" />
<input type="checkbox" value="2S" name="id[]" class="group2" />
<input type="checkbox" value="2P" name="id[]" class="group2" />
$("input:checkbox").click(function() {
$('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
$(this).prop('checked', true);
});