Allow only one checkbox of a pair to be selected

You should consider using a set of radio buttons instead of checkboxes, but:

http://stackoverflow.com/questions/2363022/toggle-checkbox

Is jquery ok?

You could do this and it would not require that you change anything in the markup. It assumes that the pattern you have for naming the inputs will remain consistent with what you have in the sample.

$(document).ready(function() {
    $("input.cb").focus( function() {
        var pair = $(this).attr("name");
        pair = pair.substring(pair.indexOf("["));
        $("input", $(this).parent().parent()).each( function() {
            var name = $(this).attr("name");
            name = name.substring(name.indexOf("["));
            if(name == pair){
                $(this).attr("checked", false);
            }
        });
    });
});

Select allOpen in new window

On second though, I like the javascript version better. It would be more efficient and browser compatibility would not be an issue. Of course the script to add the onclick attribute would have to go at the bottom of the page. Input naming would still have to be consistent with your sample and all checkboxes would need class="cb". But nothing needs to change in the markup.

<script type="text/javascript">
var allInputs = document.getElementsByTagName("input");
for(i=0; i<allInputs.length; i++){
    if(allInputs[i].className == "cb"){
        allInputs[i].setAttribute("onclick", "checkUncheck(this.name);");
    }
}
function checkUncheck(name){
    var pair = "";
    for(i=0; i<allInputs.length; i++){
        pair = allInputs[i].name;
        if(pair.substring(pair.indexOf("[")) == name.substring(name.indexOf("["))){
            if(pair != name){
                allInputs[i].checked = false;
            }
        }
    }
}
</script>

Select allOpen in new window

I couldn't get the routine in the link to work. I did find on that site this jQuery routine, that works on a single row, but if multiple pairs are on the page, it unchecks all other boxes. I need it to toggle on each single row.

$(document).ready(function(){
    $(':checkbox').bind('change', function() {
        var thisClass = $(this).attr('class');
        if ($(this).attr('checked')) {
            $(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
        }
        else {
            $(this).attr('checked', 'checked');
        }
    });
});

Yes, it's likely you'd need to create a routine for each group.  Or switch to radio buttons.

Or try my version. It works just the way you want.

Hi tommyBoy. I like your approach, but I couldn't get it to work. I tried it on JSFIDDLE, and got this result
 

Hi TommyBoy:

I just realized that the chaff on the screen was due to my adding script tags around the JavaScript in the JavaScript box. JSFIDDLE automatically adds those script tags. But with that changed, I am still not able to get it to function. I am testing it with just JavaScript. Does your code need jQuery?

Brian

You are missing an equals sign in this line of the body section script:

if(allInputs[i].className == "cb"){

Select allOpen in new window

hi tommyBoy:

I tried that change, both on JSFIDDLE and on my live site, and it did not work on either.

You can test it on JSFIDDLE at http://jsfiddle.net/JMKtB/

Brian