选择后如何禁用所有单选按钮？

Question

在检查/选择一个按钮后，我试图禁用所有具有特定名称的单选按钮。

这是我的尝试：

var radios = document.getElementsByName("question0");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
  radios[i].onclick = showResult;
}

function showResult() {
  var x = document.getElementsByClassName("checkbox");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].disabled = true;
  }
}

问题是所有单选按钮现在都将被禁用，即使是那些名为question1的按钮。

我如何针对每个问题执行此功能？因此，如果我在question1选择一个选项，我无法改变我的答案，但仍然可以选择question2。

Answer 1

您可以通过在单击其中一个时根据name定位它们来禁用整组单选按钮。

看这个工作示例：

var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
  radios[i].onclick = function() {
    showResult(this.name);
  }
}

function showResult(name) {
  var x = document.getElementsByName(name);
  for (var i = 0; i < x.length; i++) {
    x[i].disabled = true;
  }
}

Question 0:
<input type="radio" name="question0" val="answer1">
<input type="radio" name="question0" val="answer2">
<input type="radio" name="question0" val="answer3">

<br /> Question 1:
<input type="radio" name="question1" val="answer1">
<input type="radio" name="question1" val="answer2">
<input type="radio" name="question1" val="answer3">

Answer 2

为要禁用的所有单选按钮提供相同的类，并在类单击事件中添加属性禁用

明白了吗？

Answer 3

showResult应该只是禁用与单击按钮同名的按钮。

  function showResult() {
     var x = document.getElementsByName(this.name);
     var i;
     for (i = 0; i < x.length; i++) {
        x[i].disabled = true;
     }
  }

将其设为所有单选按钮的单击处理程序：

Array.from(document.querySelectorAll("input[type=radio]")).forEach(function(button) {
    button.addEventListener("click", showResult);
});