javascript - 当选中某个单选按钮时，如何使复选框组处于事件状态或非事件状态？

我正在构建一个表单，在该表单的一部分上，我有两个单选按钮，其值分别为“否”和“是”。接下来，我有两个复选框区域。我希望要求用户在选择“是”单选按钮时至少选择一个复选框字段，并在选择“否”单选按钮时重置复选框字段。

我正在尝试编写将执行以下操作的JavaScript：

a）加载时，最活跃的所有字段都需要选择一个单选按钮。

b）如果选择radioGroup1 /“ No”，请重置复选框字段的值并使它们无效。

b）如果选择radioGroup2 /“是”，请激活复选框字段，并要求至少选择一个。

我还没到任何地方。有人可以在这里给我指示吗？谢谢

<label><input type="radio" name="radioGroup" id="radioGroup1" value="No">No</label>
<label><input type="radio" name="radioGroup" id="radioGroup2" value="Yes">Yes(Year/City)</label>

<div class="checkboxGroup">
  <label><input type="checkbox" name="checkboxGroup[]" id="checkboxGroup1" value="Value 1">Value 1</label>
  <label><input type="checkbox" name="checkboxGroup[]" id="checkboxGroup2" value="Value 2">Value 2</label>
</div>

最佳答案

我不知道是否可以使用jQuery-如果是，我只是做了一个Fiddle

$("input[type='radio']").click(function () {
 if ($(this).val() == "No") {
    $("input[type='checkbox']").prop("disabled",true);
    $("input[type='checkbox']").prop("checked", false);
}
else {
    $("input[type='checkbox']").prop("disabled", false);
  }
});

如果它必须是纯JavaScript，则只需添加一条评论，只需多花几分钟。

更新：根据要求提供纯Javascript解决方案：

document.getElementById("radioGroup1").onclick = function () {
  var elems = document.getElementsByClassName('checkbox');
  for (var i = 0; i < elems.length; i++) {
    elems[i].checked = false;
    elems[i].disabled = true;
  }
};
document.getElementById("radioGroup2").onclick = function () {
  var elems = document.getElementsByClassName('checkbox');
  for (var i = 0; i < elems.length; i++) {
    elems[i].disabled = false;
  }
};

为此进行的HTML调整是为复选框添加class =“ checkbox”。
可以进行调整，以使调用一个函数的单选按钮具有一次onclick，然后检查单击的单选按钮的值，并具有上述jQuery方法的if / else，但仅作简单示例。

Fiddle - Javascript-Version

关于javascript - 当选中某个单选按钮时，如何使复选框组处于事件状态或非事件状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25828891/