单击另一组单选按钮时如何禁用一组单选按钮

Question

如果第一组单选按钮设置为是，如何禁用第二组单选按钮？如果设置为否，则启用？

第一组：

<input type="radio" id="firstsetno" name="xfirstset" value="0" checked>No

<input type="radio" id="firstsetyes" name="xfirstset" value="1">Yes

第二组：

<input type="radio" id="secondsetno" name="xsecondset" value="0" checked>No

<input type="radio" id="secondsetyes" name="xsecondset" value="1">Yes

Answer 1

// Onload disable
$.each($("input[name='xsecondset']"), function(index, radio){
      $(radio).attr("disabled", "disabled");
});

$("input[name='xfirstset']").click(function(){
  $.each($("input[name='xfirstset']"), function(index, radio){
    if(radio.checked && radio.value === "0"){ 
     $("#secondsetno")[0].checked = true;  //reset to default      
       $.each($("input[name='xsecondset']"), function(index, radio){
      $(radio).attr("disabled", "disabled");
    });
       }
       if(radio.checked && radio.value === "1"){              
       $.each($("input[name='xsecondset']"), function(index, radio){
         
      $(radio).removeAttr("disabled");
    });
       }
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="firstsetno" name="xfirstset" value="0" checked>No

<input type="radio" id="firstsetyes" name="xfirstset" value="1">Yes

<input type="radio" id="secondsetno" name="xsecondset" value="0" checked>No

<input type="radio" id="secondsetyes" name="xsecondset" value="1">Yes

// Onload disable
$.each($("input[name='xsecondset']"), function(index, radio){
                     $(radio).attr("disabled", "disabled");
});

$("input[name='xfirstset']").click(function(){
        $.each($("input[name='xfirstset']"), function(index, radio){
             if(radio.checked && radio.value === "0"){  
                $("#secondsetno")[0].checked = true;  //reset to default            
                $.each($("input[name='xsecondset']"), function(index, radio){
                     $(radio).attr("disabled", "disabled");
                });
             }
             if(radio.checked && radio.value === "1"){                          
                $.each($("input[name='xsecondset']"), function(index, radio){

                     $(radio).removeAttr("disabled");
                });
             }
        });
    });

Answer 2

我知道 Jain 已经回答了这个问题，但我想我会提供一个更容易阅读的解决方案。我使用 jQuery（Jain 也是），但如果您愿意，您可以使用原版 JavaScript 完成同样的事情。

//Fire when the status of the radio button #firstsetyes changes
$("input[type=radio][name='xfirstset']").change(function() { 
    // Get the radio buttons in the second set
    var secondSet = $("input[type=radio][name='xsecondset']");

    for (var i = 0; i< secondSet.length;  i++){
        console.log(secondSet[i]);
    }

    if( $('#firstsetyes').prop('checked') ) {           
        // Loop through the second set and disable the buttons
        for (var i = 0; i< secondSet.length;  i++){
            secondSet[i].disabled = true;
        }
    }
    else {
        for (var i = 0; i< secondSet.length;  i++){
            secondSet[i].disabled = false;
        }
    }
});

这里还有 link 我编写和测试代码的 CodePen：https://codepen.io/Rikkokiri/pen/OvpzYg?editors=1011

更新

要使第二组默认为 'no'，您只需要在对应的输入标签中输入 checked 以回答 'no'（就像您在代码中所做的那样，我只是将其取出在我测试的时候。我现在已经在 Codepen 中更新了我的笔以拥有它。）

<form>
    <p>
    <input type="radio" id="firstsetno" name="xfirstset" value="0" checked>No
        <br>
<input type="radio" id="firstsetyes" name="xfirstset" value="1">Yes
        </p>
    <p>
Second set:
<br>
<input type="radio" id="secondsetno" name="xsecondset" value="0" checked>No
    <br>
<input type="radio" id="secondsetyes" name="xsecondset" value="1">Yes
</form>

更新 2

如果您希望它只禁用第二组中的 'no' 按钮，而不是循环遍历第二组中的所有按钮，您只需定位无按钮即可。

$("input[type=radio][name='xfirstset']").change(function() { 

    if( $('#firstsetyes').prop('checked') ) {           
        $('#secondsetno').prop('disabled', true);
    }
    else {
        $('#secondsetno').prop('disabled', false);
    }
});

单击另一组单选按钮时如何禁用一组单选按钮

How do I disable a set of radio buttons when a radio button from another set is clicked

html

radio