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

我希望编写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来解决这个问题，但我认为我在这方面做得不太好，希望能得到任何帮助。谢谢

首先，代码中不应该有重复的ID

我会让所有的ID都是唯一的，然后给你的RadioBox一个类名，比如class=choice\u三

你可以给你的div一个id，按id选择要比class快，比如id=group\u三

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

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

注意，第三组和第三选择之间的间隔很重要

甚至更快：

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

---

另一件需要注意的事情是，的标签应该是单选按钮，而不是div.

如果将特殊类添加到相同的选项中，例如class=choice\u one，然后在事件处理程序中可以：

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

---

你也许可以使用一些我没有测试过的东西，只是为了让球滚起来

其思想是：无论何时单击收音机，禁用所有具有该值的组中的所有收音机，除了刚刚单击的收音机

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

---

我会跳过特殊的课程

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

---

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

完成并测试，以下是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属性 无线电的名字，所以他们的行为像 单选按钮。

---

这种方法的问题是，一旦我做出选择，我就无法改变主意，因为所有的按钮都被禁用了。所以至少添加一个清晰的按钮。你确定单选按钮是答案，而不是复选框吗？因为我自己对jQuery很陌生，你能告诉我.attrdisabled，disabled；段意味着什么？这是设置属性的方式disabled@James，谢谢，…是否有两次显示disabled的原因？是的，当您在HTML中将元素设置为disabled时，正确的标记为disabled=disabled。在jQuery中，.attr可以接受两个参数：属性名和属性值。在上面，我们将disabled属性设置为disabled。