Question

我希望编写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>

它变得棘手的是确定要显示哪些单选按钮以及启用哪些单选按钮所需的逻辑。用户必须从每个组中选择一个选项，但不能在一个组中重复相同的选择。

理想情况下，当用户访问该页面时，所有单选按钮都可用但未被选中。

如果用户首先选择（例如）第三组中的选择二，则脚本应该在第一组和第二组中禁用选择二。如果用户然后在第二组中选择选择三，那么它应该只在第一组中启用选择一，依此类推。

非常非常感谢任何帮助。我会发布我一直试图写的jQuery来解决这个问题，但我不认为我已经很好地解决了这个问题，并希望通过它可以提供任何帮助。谢谢！

Answer 1

我会跳过特殊课程。

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

根据您的要求，您可能不需要最后一行 - 它只是重新启用当前的无线电。您的html也缺少单选按钮的名称。

Answer 2

你可以使用类似的东西（我没有测试过这个，只是为了让球滚动......）

这个想法是：每当你点击一个收音机时，禁用所有具有该值的组中的所有无线电，除了刚刚点击的那个。

$(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;
    });
});

Answer 3

完成＆amp;经过测试，这是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，因此它们表现得像单选按钮。

Answer 4

首先，您的代码中确实没有重复的ID。

我会使所有ID都是唯一的，然后给你的无线电台提供一个类名 - 例如class="choice_three"。

你可以给你的div一个id，通过id选择比class更快，所以id="group_three"例如。{/ p>

然后选择一个单选按钮，只需使用以下代码：

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

注意，＃group_three和.choice_three之间的空间非常重要。

甚至更快：

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

另外需要注意的是，标签“for”应该是单选按钮，而不是div。

Answer 5

如果您为同一选择添加特殊类，例如class =“choice one”，然后在你的事件处理程序中你可以：

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

根据用户选择启用和禁用单选按钮

5 个答案: