Question

I need to do something similar to this:

            |     Column 01    |     Column 02    |    Column 03
   ------------------------------------------------------------------
   Row 01  | ( ) Option 01_01 | ( ) Option 01_02 | ( ) Option 01_03
   ------------------------------------------------------------------
   Row 02  | ( ) Option 02_01 | ( ) Option 02_02 | ( ) Option 02_03
   ------------------------------------------------------------------
   Row 03  | ( ) Option 03_01 | ( ) Option 03_02 | ( ) Option 03_03
   ------------------------------------------------------------------
   Row 04  | ( ) Option 04_01 | ( ) Option 04_02 | ( ) Option 04_03
   ------------------------------------------------------------------

It is a subscription form where the user should select 3 of the available Options, but only one from each Row and only one from each Column. For example, if the user select Option 01_02, all other options from Row 01 should not be available and also all the options from Column 02 should be disabled too. Any ideas how to achieve this? I see many people using jQuery to enable/disable fields in a form, but did not find something similar of what I want to do.
Some more information that may help: the Rows are created based on data retrieved from a MySQL database and were implemented using radio buttons. The Column restriction was added later.
Thanks for any help.

EDIT:
I realized now that my example is wrong. It should be a 3×3 matrix, like this:

            |     Column 01    |     Column 02    |    Column 03
   ------------------------------------------------------------------
   Row 01  | ( ) Option 01_01 | ( ) Option 01_02 | ( ) Option 01_03
   ------------------------------------------------------------------
   Row 02  | ( ) Option 02_01 | ( ) Option 02_02 | ( ) Option 02_03
   ------------------------------------------------------------------
   Row 03  | ( ) Option 03_01 | ( ) Option 03_02 | ( ) Option 03_03
   ------------------------------------------------------------------

Anyway, the rules still apply:

• The user must select only one Option from each Column
• The user must select only one Option from each Row
• The user must select 3 Options in total.

A valid choice is: Option 01_02, Option 02_01 and Option 03_03. The user can change his selection freely before submitting the form, but the rules must be followed. When the user changes his selection, the conflicting Option should be unselected and the invalid ones disabled.
My initial idea was to use radio buttons for the Options because of its exclusion functionality, but maybe using checkboxes provides a better solution.

Again, thanks for your help.

Answer 1

A friend of mine just finished helping me with this problem and our solution is here
http://jsfiddle.net/2zHA9/

Thanks you guys =)