javascript - 跨动态数量的单选按钮组实现依赖

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>

那么，如果有人第一次按下科学键，那么他们第二次就不能再点击它了，我该怎么做呢？

编辑:

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

Answer 1

按照您要求的 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>

纯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 属性设置为 false 以重新启用它(或保持当前状态)。

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

另外请记住，您的函数需要可供调用，在这个 fiddler 示例中，我将它加载到头部。

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

编辑:根据可以生成 X 个 radio 组的新要求以及您使用 JQuery 的能力，这里是一个新示例(请参阅 jquery 中的注释以了解工作流程):

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