HTML+CSS+JavaScript

На странице две колонки радиокнопок.
Требуется выбрать одну в первой колонке и одну во второй, затем кликнуть "готово"

Проблема в том, что не все пары кнопок являются допустимыми.
Все кнопки распадаются на 5 групп. Внутри групп допустимо сочетание любых кнопок.
Сочетать кнопки из разных групп - нельзя.

Задача в том, чтобы предупредить ошибочный выбор.

Может быть как-то можно disable по выбору кнопки в одной колонке "лишние" кнопки другой колонки, а если там была уже выбрана одна из кнопок, и она попала в группу недопустимых, то делать какой-то unselect, чтобы ни одна не была выбрана?

Подскажите, пожалуста, как это писать?

Приблизительно так

Интересно!
Но неудобно.

Полезная для меня функциональность этого примера только в том, что при "неправильном выборе" предидущий выбор отменяется.

Неприемлемо то, что единожды сделав выбор в колонке, исправить его нельзя (надо делать общий сброс)

Ещё у меня кнопки имеют лейбелы с подписями. Хорошо бы менять стили лейбелов так, что сразу будет ясно из чего выбирать можно, а что отменит предидущий выбор. Возможно такое?

Я, конечно,понимаю, что самому желательно учить JS, но мне пока по вашему примеру трудно понять как он работает и переделать его "под себя".

Но я ещё подумаю.
Ещё я не совсем ясно представляю как правильно связывать лейбелы с радиокнопками.

Сейчас пока страница у меня выглядит примерно так:

<form method="POST">     <table width=100%><tr><td><ul>    <li><b>1</b></li>        <li>        <input type='radio' name='new_forum' value=2><label >parables ()</label></li>    <li>        <input type='radio' name='new_forum' value=6><label >haveing_fun ()</label></li>    <li>        <input type='radio' name='new_forum' value=7><label >naughting ()</label></li>    <li>        <input type='radio' name='new_forum' value=8><label >action ()</label></li>    <li>        <input type='radio' name='new_forum' value=10><label >diverse ()</label></li>    <li>        <input type='radio' name='new_forum' value=14><label >diverse (all)</label></li>    <li>        <input type='radio' name='new_forum' value=15><label >my_additions (book)</label></li>    <li>        <input type='radio' name='new_forum' value=16><label >how_learn (book)</label></li>    <li>        <input type='radio' name='new_forum' value=20><label >what_i_like (book)</label></li>    <li>        <input type='radio' name='new_forum' value=21><label>criticism (book)</label></li>    <li>        <input type='radio' name='new_forum' value=22><label>diverse (book)</label></li>    <li>        <input type='radio' name='new_forum' value=23><label >models (phone)</label></li>    <li>        <input type='radio' name='new_forum' value=24><label >icq (phone)</label></li>    <li>        <input type='radio' name='new_forum' value=25><label >sms (phone)</label></li>    <li>        <input type='radio' name='new_forum' value=30><label>post (phone)</label></li>    <li>        <input type='radio' name='new_forum' value=31 checked><label >diverse (phone)</label></li>    </ul></td>    <td><ul>     <li><b>2</b></li>         <li>        <input type='radio' name='new_type' value=1><label>what_it_for ()</label></li>    <li>        <input type='radio' name='new_type' value=2><label>how_make_it ()</label></li>    <li>        <input type='radio' name='new_type' value=3><label>best_works ()</label></li>    <li>        <input type='radio' name='new_type' value=5><label>diverse ()</label></li>    <li>        <input type='radio' name='new_type' value=6><label >reliable_information (all)</label></li>    <li>        <input type='radio' name='new_type' value=7><label >most_interesting (all)</label></li>    <li>        <input type='radio' name='new_type' value=8><label>all (all)</label></li>    <li>        <input type='radio' name='new_type' value=9><label >author_colomn (book)</label></li>    <li>        <input type='radio' name='new_type' value=10><label >best_works (book)</label></li>    <li>        <input type='radio' name='new_type' value=11><label>all (book)</label></li>    <li>        <input type='radio' name='new_type' value=12><label>what_it_for (phone)</label></li>    <li>        <input type='radio' name='new_type' value=13><label >how_make_it (phone)</label></li>    <li>        <input type='radio' name='new_type' value=14 checked><label>all (phone)</label></li></ul></td></tr></table>    <input type="submit" value="READY" >    </form>     </td></tr></table>

То есть кнопки я разнёс в две колонки таблицы.
Идея была в том, что когда курсор находится в левой колонке таблицы, в правой меняются стили радиокнопок так, что видно какие из них можно выбирать, а какие нельзя (делаются disable по мере тог, что кликается в левой колонке табицы) Если курсор переходит в правую колонку, то все кнопки в правой колонке делаются enable, зато в левой по мере кликания в правой часть кнопок изменяет свою доступность и если выбирается недопустимая пара, то отменяется выбор в левой колонке.
Ещё к этому хотелось привязать изменение стилей лэйбелов, но, как видите, сейчас я даже не могу сообразить как лэйбел привязывается к своей кнопке...
Первый раз так сталкиваюсь с радиокнопками серьёзно.

P.S. Слова в скобочках обозначают принадлежность радиокнопок к группам.

По контексту ваши лейблы слишком сложны для восприятия для человека "не в теме".
Потому сделал попроще - см. http://codecenter.awardspace.com/radiosystem.html - там группы определяются так называемым "житейским смыслом".


>Первый раз так сталкиваюсь с радиокнопками серьёзно.
У радиокнопок НИКАКИХ принципиальных отличий от иных тегов, в общем-то, совсем и НЕТ.
Здесь нужно "включить" простую ("программистскую") логику.

Простой перенос моего скрипта на ваш HTML-код вам ничего не даст.
Ибо логика здесь чётко завязана на структуру документа.
Списки и лейблы я не пользовал - вместо этого объединил текст кнопки с самой кнопкой в единый <SPAN> и переносил их тегом <BR>. Соответственно, <SPAN>'ы одной логической группы объединил в один <DIV>...

В общем, поизучайте... принципы и приёмы, использованные в примере, как увидите, - элементарны.
Если "въедете" в них, то легко сделаете под любую СВОЮ структуру документа.

Замечательно вы сделали!
У меня, правда,колонки полностью равноправны по смыслу.
А по интерфейсу, получается, нет, но ничего, главная цель всё равно достигнута, а про мелочи - забудем.

Я тогда переделаю свою страницу под вашу, а функцию оставлю.

У радиокнопок НИКАКИХ принципиальных отличий от иных тегов, в общем-то, совсем и НЕТ
Я не знаю, например, как правильно к радиокнопке прицепить лэйбел... Поэтому структура непонятна, и программировать, соответственно ещё рано. На этом и застрял в начале.
Сейчас это как бы и не важно, но подскажите, хоть для общего образования! (Что там с лэйбелами?)

И ещё... у вас там на странице, вместо русских букв - цифры в исходнике. Можете поправить? А то в глазах рябит!