Allow only one checkbox of a pair to be selected

I need to allow only one checkbox of a pair to be selected. There are multiple pairs on the page.

Yes, I know I should use radio buttons, but due to some legacy processing code, that is not practical.

I want to be sure that only one of each pair can be chosen, but there will be multiple pairs

The code below is a simplified version that shows the pairs. the array keys are infinately variable, and created in real time.


<form method="post" name="FormBox1" action=approval.php enctype="multipart/form-data"><
<table width='600' id="approveList">
<tr>
<td width='20'>OK</td><td width='20'>X</td><td width='150'>Company</td></tr>
<tr>
<td width='20' valign="top"><input type="checkbox" value="approve" class="cb" name="approv[upeqatub]"  /></td>
<td width='20' valign="top"><input type="checkbox" value="delete" class="cb" name="del[upeqatub]"  /></td>
<td>Acme</td>
</tr><tr>
<td width='20' valign="top"><input type="checkbox" value="approve" class="cb" name="approv[eryzujan]"  /></td>
<td width='20' valign="top"><input type="checkbox" value="delete" class="cb" name="del[eryzujan]"  /></td>
<td>National</td>
</tr>
<table>
<input type='submit' name='submit' value='Submit' ></form>

Open in new window

LVL 6
birwinAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
You should consider using a set of radio buttons instead of checkboxes, but:

http://stackoverflow.com/questions/2363022/toggle-checkbox
0
Tom BeckCommented:
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);
            }
        });
    });
});

Open in new window

0
Tom BeckCommented:
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>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

birwinAuthor Commented:
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');
        }
    });
});
0
Paul MacDonaldDirector, Information SystemsCommented:
Yes, it's likely you'd need to create a routine for each group.  Or switch to radio buttons.
0
Tom BeckCommented:
Or try my version. It works just the way you want.
0
birwinAuthor Commented:
Hi tommyBoy. I like your approach, but I couldn't get it to work. I tried it on JSFIDDLE, and got this result
 Results from JSFIDDLE
0
birwinAuthor Commented:
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
0
Tom BeckCommented:
You are missing an equals sign in this line of the body section script:


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

Open in new window

0
birwinAuthor Commented:
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
0
Tom BeckCommented:
I don't know what is going on with your live site, but if you set it up properly on jsfiddle, it works fine. I don't have a jsfiddle account, but putting javascript in the area meant for html apparently does not work. Put the javascript in the javascript box and set the dropdowns to no-wrap (body) and No Library (pure js).
jsfiddle.jpg
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.