Question

我有以下代码。

10:00 - 10:30:  <input type="radio" name="group1" value="Science"> Science <input type="radio" name="group1" value="Math"> Math<br>
10:30 - 11:00:  <input type="radio" name="group2" value="Science"> Science <input type="radio" name="group2" value="Math"> Math<br>

那么，如果有人第一次按下Science，那么我怎么能在第二次点击它的时候呢？

编辑：

有没有一种方法可以在不依赖于组数的情况下完成JS / Jquery代码，因为组的数量是相关的？

Answer 1

为此，您需要编写一些在客户端运行的JavaScript代码。

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

$('input[type="radio"]').on('click', function(e) {
  var foo = document.getElementById('sci1').checked;
  var foo2 = document.getElementById('math1').checked;
  
  if (foo == true) {
    jQuery("#sci2").attr('disabled', true);
     document.getElementById('sci2').checked=false;
  } else {
  jQuery("#sci2").attr('disabled', false);
  }
   if (foo2 == true) {
    jQuery("#math2").attr('disabled', true);
    document.getElementById('math2').checked=false;
    
  } else {
  jQuery("#math2").attr('disabled', false);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
10:00 - 10:30:  <input type="radio" id="sci1" name="group1" value="Science"> Science <input type="radio" name="group1"  id="math1" value="Math"> Math<br>
10:30 - 11:00:  <input type="radio" name="group2" value="Science"  id="sci2"> Science <input type="radio" name="group2" value="Math" id="math2"> Math<br>

Answer 2

编辑，因为你要求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>

Pure Javascript：

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

您要做的是为第一组中的每个项目设置内联的onclick调用。调用该函数时，您需要从第一个组中获取所选值，然后遍历第二个列表（按组名称获取元素集合）并比较这些值。如果值匹配，则需要添加disabled属性，如果已选中，则取消选中。如果不匹配则需要将disabled属性设置为false才能重新启用它（或保持当前状态）。

jsfiddler：https://jsfiddle.net/s4qjfmuz/1/

还要记住，你的函数需要被调用，在这个小提琴示例中我将它加载到头部。

如果您的要求允许使用jquery，那么这就变得更加容易了。

编辑：根据X的新要求，可以生成X个无线电组以及您使用JQuery的能力，这里有一个新的示例（请参阅jquery中的注释以了解工作流程）：

New Fiddler：https://jsfiddle.net/rqmr2jdz/

HTML

<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>

JQuery的：

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

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

2 个答案: