Включение и отключение радиокнопок в зависимости от выбора пользователя - PullRequest
Новая
       14

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

5 голосов
/ 23 августа 2009

Я пишу jQuery для включения только переключателей, в зависимости от того, какие переключатели в настоящее время выбраны в соответствии с некоторой бизнес-логикой.

По сути, есть 3 группы из 3 переключателей, которые выглядят примерно так (мои извинения за то, что я многословен с этим примером HTML, но надеюсь, что это покажет, что я имею в виду): 

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

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

В идеале, когда пользователь попадает на страницу, все переключатели будут доступны, но не выбраны.

Если пользователь должен был сначала выбрать (например) Вариант два в третьей группе, сценарий должен затем отключить Вариант два в первой и второй группах. Если затем пользователь выбирает вариант три в группе два, ему следует включить только вариант один в группе 1 и т. Д.

Любая помощь будет очень и очень признательна. Я бы опубликовал jQuery, который я пытался написать, чтобы решить эту проблему, но я не думаю, что я проделал это очень хорошо и хотел бы получить любую помощь, работая над этим. Спасибо!

Ответы [ 5 ]

8 голосов
/ 23 августа 2009

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

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

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

3 голосов
/ 23 августа 2009

Готово и проверено, вот 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 радио на NAME, поэтому они ведут себя как переключатели.
3 голосов
/ 23 августа 2009

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

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

$(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;
    });
});
2 голосов
/ 23 августа 2009

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

Я бы сделал все идентификаторы уникальными, а затем дал бы вашим радиобоксам имя класса - например, 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.

1 голос
/ 23 августа 2009

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

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