php html java checkbox array, but have first 4 act like radio - php

Question

I've been playing with trying to get the first 4 of a checkbox array to act like radio buttons for a while now and I thought I had it but I can't figure it out.. I searched through here and found..
Checkbox to act like radio button, check first four or last four checkboxes but not both- javascript?
Though I've haven't quite been able to make it work in my case apparently. So to re-iterate. I need the first 4 you can only pick 1, while the others can be multiple of any combination. I know its something small I have to be missing.
HTML
<form name="account_info" id="account_info">
<input type="checkbox" name="permissions[]" value="0" onClick="checkOnly(this)"> Permission 0<br>
<input type="checkbox" name="permissions[]" value="1" onClick="checkOnly(this)"> Permission 1<br>
<input type="checkbox" name="permissions[]" value="2" onClick="checkOnly(this)"> Permission 2<br>
<input type="checkbox" name="permissions[]" value="3" onClick="checkOnly(this)"> Permission 3<br>
<input type="checkbox" name="permissions[]" value="4"> Permission 4<br>
<input type="checkbox" name="permissions[]" value="5"> Permission 5<br>
<input type="checkbox" name="permissions[]" value="6"> Permission 6<br>
<input type="checkbox" name="permissions[]" value="7"> Permission 7<br>
</form>
The Script
function checkOnly(myCheckbox) {
for(var i = 0; i < 4; i++) {
if(document.account_info.elements[i].name != myCheckbox.name) {
document.account_info.elements[i].checked = false;
}
}
}
Here is the link to jsfiddle
http://jsfiddle.net/np4dry0f/3/

Answer 1

The problem is that the name attribute will always be permissions[] in javascript.
A possible solution is to use the value instead of the name:
function checkOnly(myCheckbox) {
for(var i = 0; i < 4; i++) {
if(document.account_info.elements[i].value != myCheckbox.value) {
document.account_info.elements[i].checked = false;
}
}
}
See an example on JS Bin.

Answer 2

Much easier than looping through each checkbox
$('.radio').change(function() {
$('.radio').not(this).removeAttr('checked');
$(this).attr('checked','checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="account_info" id="account_info">
<input class="radio" type="checkbox" name="permissions[]" value="0"> Permission 0<br>
<input class="radio" type="checkbox" name="permissions[]" value="1"> Permission 1<br>
<input class="radio" type="checkbox" name="permissions[]" value="2"> Permission 2<br>
<input class="radio" type="checkbox" name="permissions[]" value="3"> Permission 3<br>
<input class="radio" type="checkbox" name="permissions[]" value="4"> Permission 4<br>
<input class="radio" type="checkbox" name="permissions[]" value="5"> Permission 5<br>
<input class="radio" type="checkbox" name="permissions[]" value="6"> Permission 6<br>
<input class="radio" type="checkbox" name="permissions[]" value="7"> Permission 7<br>
</form>