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

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

我知道

Jain已经回答了这个问题，但我想我会提供一个稍微容易阅读的解决方案。我使用jQuery(Jain也是如此(，但如果你愿意，你可以使用vanilla 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;
        }
    }
});

这里还有我编写和测试代码的代码笔的链接：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);
    }
});

Answer 2

// 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");
                });
             }
        });
    });