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

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

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

$(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 s.
• Изменены атрибуты ID радио на ИМЯ , поэтому они ведут себя как радио-кнопки.

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

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

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

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

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

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

Или даже быстрее:

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

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

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

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