Javascript 跨动态数量的单选按钮组实现依赖关系

我有以下代码

10:00-10:30：科学数学

10:30-11:00:Science Math

为了做到这一点，您需要编写一些在客户端运行的JavaScript代码

例如，以下是使用jQuery库的示例：

$（'input[type=“radio”]”）。在（'click'，函数（e）上{
var foo=document.getElementById（'sci1'）。已选中；
var foo2=document.getElementById（'math1'）。已选中；
如果（foo==true）{
jQuery（“#sci2”）.attr（'disabled'，true）；
document.getElementById（'sci2'）。checked=false；
}否则{
jQuery（“#sci2”）.attr（'disabled'，false）；
}
如果（foo2==true）{
jQuery（“#math2”）.attr（'disabled'，true）；
document.getElementById（'math2'）。checked=false；
}否则{
jQuery（“#math2”）.attr（'disabled'，false）；
}
});

10:00-10:30：科学数学

10:30-11:00:Science Math
根据您的要求编辑javascript，但其他答案在jquery中：

给定html：

<input type="radio" name="group1" value="Science" onclick="clickAction();"> Science <input type="radio" name="group1" value="Math" onclick="clickAction();"> Math<br>
<input type="radio" name="group2" value="Science"> Science <input type="radio" name="group2" value="Math"> Math<br>

我对编程很陌生，你能给我举个例子吗？@Riz waan我已经修改了我的答案，用纯javascript展示了一个例子，因为你在你的问题中没有提到jquery。如果这变得更容易，我可以使用jquery，但在这里我又添加了两个组，有没有一种方法可以在添加了多少组（比如class属性）的情况下保持相同的javascript代码？有没有一种方法可以像eithier那样使用Jquery？其目的是从sql数据库中获取n个组，我认为如果Jquery/javascript代码不是基于组的数量，而是相当独立的话，那么会更容易。你明白我的意思吗？@Riz waan发布了最新消息来处理所描述的情况。还请更新原始问题的所有详细信息，以便其他用户在搜索其答案时发现它很有用。这将是我最后一次编辑，因为您已经选择了不同的选定答案，但我希望这有助于您找到解决方案。您已经接受了答案。如果您不打算删除，您应该等待其他用户取消删除并接受它。@cᴏʟᴅsᴘᴇᴇᴅ 我已经接受了这个答案，然后另一个用户发布了他的答案，我觉得这更像我需要的，而另一个更具可扩展性。我们对他的回答进行了评论，他说他将努力纠正他在回答中发现的一个错误，你应该可以从他的评论中看到这一点。所以我一直等到他把它修好，这样我也可以接受他的回答。如果他无法修复代码，我仍然需要它，这样我就可以尝试在上面开发一些东西，谢谢您的理解。@cᴏʟᴅsᴘᴇᴇᴅ 我的意思是，一旦他确定了答案，我就会选择他的答案。
function clickAction() {
var sel = document.querySelector('input[name="group1"]:checked').value;
var grp2 = document.getElementsByName('group2');
  for(var i = 0; i < grp2.length; i++) {
    if(grp2[i].value == sel){
      grp2[i].disabled = true;
      grp2[i].checked = false;
    } else {
     grp2[i].disabled = false;
    }
  }
}

<input type="radio" name="group1" value="Science" class="childRadio"> Science <input type="radio" name="group1" value="Math" class="childRadio"> Math <input type="radio" name="group1" value="Social Studies" class="childRadio"> Social Studies <input type="radio" name="group1" value="Chemistry" class="childRadio"> Chemistry<br>
<input type="radio" name="group2" value="Science" class="childRadio"> Science <input type="radio" name="group2" value="Math" class="childRadio"> Math <input type="radio" name="group2" value="Social Studies" class="childRadio"> Social Studies <input type="radio" name="group2" value="Chemistry" class="childRadio"> Chemistry<br>
<input type="radio" name="group3" value="Science" class="childRadio"> Science <input type="radio" name="group3" value="Math" class="childRadio"> Math <input type="radio" name="group3" value="Social Studies" class="childRadio"> Social Studies <input type="radio" name="group3" value="Chemistry" class="childRadio"> Chemistry<br>

$(document).ready(function() {
  $(".childRadio").change(function() {
    //Get the ele that triggered the change
    var selObj = this;
    //Get current list of selected item values for later use
    var alReadySelArray = []; 
    $('.childRadio:checked').each(function() {
      //pusinbg to array
      alReadySelArray.push($(this).val());
    });
    //Iterate through elements and decide how to handle with new change
    $(".childRadio").each(function() {
      //if not the current object that was selected
      if(selObj !== this){
        //if the value isn't already selected somehwere then it should be available
        if (($.inArray($(this).val(), alReadySelArray) === -1)){
          $(this).prop('disabled', false);
        } else {
          //Else disable all except the one already checked
          if($(this).prop('checked') == false) {
            $(this).prop('disabled', true);
          }
        }
      } 
    });
  });
});