Включение и отключение переключателей в зависимости от выбора пользователя

Я бы пропустил специальные занятия.

$("input[type=radio]").click(function() { 
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled"); 
  $(this).removeAttr("disabled"); 
});

В зависимости от ваших требований вам может не понадобиться последняя строка — она просто повторно включает текущее радио. В вашем html также отсутствуют имена для ваших переключателей.

Возможно, вы сможете использовать что-то вроде (я не проверял это, это просто для того, чтобы сдвинуться с мертвой точки...)

Идея такова: всякий раз, когда вы нажимаете на радиостанцию, отключайте все радиостанции во всех группах с этим значением, кроме той, которая только что была нажата.

$(document).ready(function() {
    $("input[type=radio]").click(function() {
        var val = $(this).val();
        var $all_radios = $("input[type=radio]").filter("[value=" + val + "]");
        $all_radios.not($(this)).attr('disabled', 'disabled');
        return true;
    });
});

Сделано и протестировано, вот jQuery:

$(document).ready(function() {
    $('input:radio').click(function() {
       //reset all the radios
       $('input:radio').removeAttr('disabled');
       if($(this).is(':checked')) {
           var val = $(this).val();
           //disable all the ones with the same value
           $('input:radio').each(function() {
               if(val == $(this).val()) {
                   $(this).attr('disabled',true);
               }
           });
           //let's not disable the one we have just clicked on
           $(this).removeAttr('disabled');
       }
    });
});

и модифицированная разметка:

<p>
  <label for="group_one">Group One</label>
</p>
<p>
  <div class="group_one">
    <div>
      <label for="group_one_choice_one">Choice One</label>
      <br />
      <input checked="checked" name="group_one" type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_one_choice_two">Choice Two</label>
      <br />
      <input name="group_one" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_one_choice_three">Choice Three</label>
      <br />
      <input name="group_one" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_two">Group Two</label>
</p>
<p>
  <div class="group_two">
    <div>
      <label for="group_two_choice_one">Choice One</label>
      <br />
      <input checked="checked"  name="group_two"  type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_two_choice_two">Choice Two</label>
      <br />
      <input name="group_two" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_two_choice_three">Choice Three</label>
      <br />
      <input name="group_two" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_three">Group Three</label>
</p>
<p>
  <div class="group_three">
    <div>
      <label for="group_three_choice_one">Choice One</label>
      <br />
      <input checked="checked" name="group_three" type="radio" value="1" />
      <br />
    </div>
    <div>
      <label for="group_three_choice_two">Choice Two</label>
      <br />
      <input name="group_three" type="radio" value="2" />
      <br />
    </div>
    <div>
      <label for="group_three_choice_three">Choice Three</label>
      <br />
      <input name="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>

Изменения в разметке:

• Избавился от внутренних DIV IDов.
• Изменены атрибуты ID радиостанций на NAME, чтобы они вели себя как радиокнопки.

Во-первых, у вас действительно не должно быть дубликатов идентификаторов в вашем коде.

Я бы сделал все идентификаторы уникальными, а затем дал бы вашим радиобоксам имя класса - например, class="choice_three".

Вы можете дать своим div идентификатор, выбор по идентификатору быстрее, чем по классу, например, id="group_three".

Затем, чтобы выбрать переключатель, просто используйте следующий код:

$("#group_three .choice_three").attr("disabled", "disabled");

Обратите внимание, что расстояние между #group_three и .choice_three важно.

Или еще быстрее:

$("#group_three input:radio.choice_three").attr("disabled", "disabled");

Также следует отметить, что метка «для» должна быть для переключателя, а не для div.

Если вы добавите специальные классы к одному и тому же выбору, например. class="choice_one", а затем в обработчике событий вы можете:

if ($this).hasClass("choice_one") { $(".choice_one").attr("disabled", "disabled"); }
else if ($this).hasClass("choice_two") { ... }
...