For clarification ...
The use can toggle between enabled/disabled for top position 1. True?
Same for top position 2?
Do the bottom choices A, B, C change between top 1 and 2?
Where does the "background" information come from? Is it a value of the elements of the selections?
Can you provide a link to the images you plan to use for the top and bottom positions.
Thanks for the reply!
I believe that explaining my goal could help us solving that. Well, I'm developing and TOP5 web application, where the users will select 5 cities among many others.
When the user starts using the webpage, all the positions above will be available for selection. When the user selects one of them, it gets a new color to show that it is selected and all the other positions change colors to a "disabled-like" state. But only the colors, because the positions should still be available to be clicked, in case the user wants to change the selected position without choosing a city (option) first.
The options below will not change at all, except when they get selected: in that case, they have to be disabled. There's just one option for the entire selection (in short, the user cannot pick a city twice).
Every option will have a string and a background. Something like "New York City" and some related photo. That data must be acquired by the selected position. For instance: user clicks position 1, then clicks "New York City", then that option gets disabled and "New York City" and the background goes to position 1.
And what about when the user clicks at a position that has already been filled with one city? The user is asked about removing that selection and, upon agreement, that position gets available again and that city (option) enabled again.
I don't know the best place to keep the background image information (HTML, CSS). I would go with the your suggestion.