动态禁用&启用单选按钮 [英] Dynamically disabling & enabling radio buttons

问题描述

我正在创建一个简单的DISC配置文件测试，其中每个问题都有8个单选按钮，如果我选中GreatM单选按钮，GreatL单选按钮将被禁用且无法选择，您必须选择其他像Overpowered，Kind或Brave。表单如下所示，

I'm creating a simple DISC profile test, where in each question have 8 radio button where if I check the Great "M" radio button, the Great "L" radio button will be disabled and cannot be selected and you must choose other like Overpowered, Kind, or Brave. The form looks like this,

我正在尝试使用jQuery，

I'm trying with jQuery,

    $(document).ready(function(e) {
    var Form = $("[name=DISC]");

    Form.find("input.Most").each(function() {
        $(this).change(function() {
            $(this).next().attr("disabled", "disabled");
            $(this).prev().attr("disabled");
        });
    });

    Form.find("input.Least").each(function() {
        $(this).change(function() {
            $(this).prev().attr("disabled","disabled");
            $(this).next().attr("disabled");
        });
    });
});

但是，如果我检查GreatM单选按钮，稍后我将其更改为Overpowered伟大的L单选按钮仍然被禁用，所以使用其他L按钮，如果我稍后更改L按钮，M仍然被禁用，看起来像这样，

But, if I check the Great "M" radio button, and later I change it into Overpowered the Great "L" radio button still disabled, and so with the other "L" buttons, if I change the "L" button later, the the "M" is still disabled, looks like this,

我想得到的结果是，如果我选择M for Kind，我不能选择L for Kind。有帮助吗？抱歉英语不好。 ：）

The results I want to get is, If I choose M for Kind I cannot choose L for Kind. Any help? Sorry for bad English. :)

推荐答案

创建两组按钮（即给按钮设置相同的名称属性），默认行为是每次只能检查每组中的一个按钮。

Create two groups of buttons (i.e give the buttons the same name attribute) and the default behaviour would be that only one button from each group can be checked at a time.

<div class="lgroup">
 <input type="radio" name="Lgroup" value="1"> //great
 <input type="radio" name="Lgroup" value="2"> //overpowered
 <input type="radio" name="Lgroup" value="3"> // kind 
 <input type="radio" name="Lgroup" value="4"> //brave  
</div>
<div class="mgroup">
 <input type="radio" name="Mgroup" value="1"> //great
 <input type="radio" name="Mgroup" value="2"> //overpowered
 <input type="radio" name="Mgroup" value="3"> //kind
 <input type="radio" name="Mgroup" value="4"> //brave
</div>

要禁止将同一属性标记为L和M，您可以使用以下脚本：

To forbid the same attribute being marked as L and M, you can use the following script:

$("input").change(
    function(){
      i= $(this).index();
       sibling =  $(this)
        .parent()
        .siblings()
        .find("input")
        .eq(i);
     if (sibling.is(":checked")) 
         $(this).removeAttr("checked");
         }
);

FIDDLE

这篇关于动态禁用&启用单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！