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

此处还链接到我编写和测试代码的CodePen：https://codepen.io/Rikkokiri/pen/OvpzYg?editors=1011

<强>更新

要将第二个默认值设置为“否”，您只需要在输入标记中checked来回答“否”＆＃39; （就像你在你的代码中所做的那样，我在测试时就把它拿出来了。我现在已经在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

如果您希望禁用“不”，请执行此操作。第二组中的按钮，而不是循环遍历第二组中的所有按钮，只需按下否按钮。

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

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

2 个答案: