5

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

4

5 回答 5

8

我会跳过特殊课程。

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

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

于 2009-08-23T15:44:33.797 回答
3

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

这个想法是：每当您单击一个收音机时，禁用所有具有该值的组中的所有收音机，除了刚刚单击的收音机。

$(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;
    });
});
于 2009-08-23T15:38:57.867 回答
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>

标记的变化：

  • 摆脱了内部DIV IDs。
  • ID将收音机的属性更改为NAME，因此它们的行为类似于单选按钮。
于 2009-08-23T15:54:38.020 回答
2

首先，你真的不应该在你的代码中有重复的 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。

于 2009-08-23T15:31:30.300 回答
1

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

if ($this).hasClass("choice_one") { $(".choice_one").attr("disabled", "disabled"); }
else if ($this).hasClass("choice_two") { ... }
...
于 2009-08-23T15:36:29.337 回答