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

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> 

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

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

如果用户首先在第三组中选择（例如）选择二，那么该脚本应该禁用组1和组2中的选择二。如果用户然后在第二组中选择选择三，那么它应该仅在第一组中启用选择一，等等。

任何帮助将非常，非常感谢。我会张贴我一直试图编写的jQuery来解决这个问题，但我不认为我一直在讨论这个问题，并且会喜欢通过它进行工作的任何帮助。谢谢！

Answer 1

我会跳过特殊课程。

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

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

Answer 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"); 

另外一点需要注意的还有，标签“的”应该是单选按钮，而不是股利。

Answer 3

如果您将相同的选项添加到相同的选项，例如类=“choice_one”，然后在你的事件处理程序，您可以：

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

Answer 4

你也许能够使用的东西像（我没有测试过这一点，它只是为了让球滚动...）

想法是：每当你点击收音机时，除了刚才点击过的那个值以外，所有组中的所有收音机都被禁用。

$(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 5

完成&测试，这里的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> 

更改的标记：

• 摆脱了内DIVID S的。
• 将 无线电的ID属性更改为NAME，因此它们的行为与单选按钮 相同。