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

Question

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

我正在尝试编写一个 JavaScript 来执行以下操作:

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

b) 如果选择了 radioGroup1/“否”，请重置复选框字段的值并使它们处于非事件状态。

b) 如果选择了 radioGroup2/“Yes”，则使复选框字段处于事件状态并要求至少选择一个。

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

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

Answer 1

我不知道你是否可以选择使用 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"。
可以调整为调用一个函数的单选按钮单击一次，然后检查单击的单选按钮的值并具有上述 jQuery 方法的 if/else，但只是简单的示例。

Fiddle - Javascript-Version