Mutually exclusive selectable items

Mutually exclusive selectable items

My problem mostly stems out of not knowing how to implement my problem, maybe someone in the jquery world can help.

I need a grid to show a list of events. Think for example soccer matches. So for each you can pick the home team, draw or away team. The choice must be mutually exclusive for each match. My current solution has an extra column with a dropdown for your result.

I would like the actual items to be selectable. Im not forced to use a grid. A repeater would work too.

The data source which is an object has the home and away team logo's, a match ID which is hidden from the user and a boolean value for home, draw and away. The latter boolean values are mutually exclusive.

So in essence I'd like to have a solution where you can click the home team logo and it will check the home boolean value and highlight the home team logo or select it in some way. The user should only see Home Team Logo, Draw and Away team logo and click on his pick. If he changes his selection then his old selection should be de-selected.

Any ideas?