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

【问题标题】：Enabling and Disabling Radio Buttons Depending on User Selection根据用户选择启用和禁用单选按钮
【发布时间】：2010-11-22 01:44:58
【问题描述】：

我正在寻找编写 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 来解决这个问题，但我认为我一直没有很好地解决这个问题，并且希望得到任何帮助来解决这个问题。谢谢！

【问题讨论】：

这种方法的问题（？）是，一旦我做出选择，我就无法改变主意，因为所有按钮都被禁用。所以至少添加一个清除按钮。
你确定单选按钮是这里的答案，而不是复选框

标签： javascript jquery radio-button business-logic

【解决方案1】：

我会跳过特殊课程。

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

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

【讨论】：

【解决方案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;
    });
});

【讨论】：

【解决方案3】：

完成并测试，这里是 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>

对标记的更改：

摆脱了内心的DIVIDs。
更改了ID 的属性无线电到NAME，所以他们的行为就像单选按钮。

【讨论】：

【解决方案4】：

首先，您的代码中确实不应该有重复的 id。

我会让所有的 ID 唯一，然后给你的单选框一个类名 - 例如class="choice_three"。

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

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

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

注意，#group_three 和 .choice_three 之间的空格很重要。

甚至更快：

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

还有一点需要注意，标签“for”应该是单选按钮，而不是 div。

【讨论】：

因为我自己对 jQuery 很陌生，你能告诉我.attr("disabled, "disabled"); 段的含义吗？
这是您可以将属性设置为禁用的方式
@James，谢谢，..."disabled" 出现两次是否有原因？
是的，当您在 HTML 中将元素设置为禁用时，正确的标记是 disabled="disabled"。在 jQuery 中， .attr() 可以接受 2 个参数，属性名称和属性值。在上面我们将“disabled”属性设置为“disabled”。

【解决方案5】：

如果您将特殊类添加到相同的选择中，例如class="choice_one"，然后在您的事件处理程序中，您可以：

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

【讨论】：