JavaScript - 试图禁用所有单选按钮答案

【问题标题】：JavaScript - Trying to disable all radio buttonsJavaScript - 试图禁用所有单选按钮
【发布时间】：2021-07-01 23:07:52
【问题描述】：

当按下按钮时，我试图让所有单选按钮禁用。到目前为止，我已将单选按钮上的所有 id 设置为“1”

HTML 代码：

    <input id="1" type="checkbox" name="Q1" value="incorrect"> Bob <br>
    <input id="1" type="checkbox" name="Q1" value="incorrect"> Jim <br>
    <input id="1" type="checkbox" name="Q1" value="correct"> Callum <br>

JavaScript 代码：

document.getElementById("1").disabled = true;

但是，当我对此进行测试时，它只会禁用 1 个单选按钮，而不是所有单选按钮。有没有办法像我尝试过的那样禁用它们？

谢谢

【问题讨论】：

ID 应该是唯一的，你在滥用它们。您可以使用其他东西将<input>s 组合在一起，例如一个类或一个包含<div>。
我如何使用类来做到这一点？
你在使用类的哪一部分有问题？
Biffen 是对的：HTML 文件中的 ID 必须是唯一的。除此之外，它必须以字母开头，大小写无关。

标签： javascript html radio-button

【解决方案1】：

<input class="checkbox" type="checkbox" name="Q1" value="incorrect"> Bob <br>
<input class="checkbox" type="checkbox" name="Q1" value="incorrect"> Jim <br>
<input class="checkbox" type="checkbox" name="Q1" value="correct"> Callum <br>

带有类的Javascript：

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

【讨论】：

您的回答是可以的，但在这种情况下并没有添加class="checkbox" 有点多余。您也可以使用document.getElementsByTagName("input") 并保留课程。根据具体情况，这些解决方案中的任何一个都可能受到青睐。
当然是。但这只是举例，所以他可以以某种方式只选择他想要禁用的复选框。
它有效。只需按类或标签名称或您想要的任何内容进行迭代，abnd disabled = true 就可以完成这项工作。

【解决方案2】：

您可以使用forEach 函数在一行中完成。

HTML：

<form if="myForm">
    <input id="1" type="checkbox" name="Q1" value="incorrect"> Bob <br>
    <input id="1" type="checkbox" name="Q1" value="incorrect"> Jim <br>
    <input id="1" type="checkbox" name="Q1" value="correct"> Callum <br>
</form>

JS ES6：

const form = document.querySelector('#myForm');

form.Q1.forEach(cb => (cb.disabled = true));

JS 香草：

var form = document.querySelector('#myForm');

form.Q1.forEach(function(cb) {
   cb.disabled = true;
});

【讨论】：

【解决方案3】：

由于 Id 是唯一的，因此您不应为所有按钮赋予相同的 Id，而应为所有按钮赋予相同的类。然后就可以运行for循环了：

var radioButtons = document.getElementsByClassName("your class name");
for(var i=0;i<radioButtons.length;i++) {
   radioButtons[i].disabled = true;
}

【讨论】：

使用类是多余的，最好用name属性

【解决方案4】：

改用这个：

<input id="1" type="checkbox" name="Q1" value="incorrect"> Bob <br>
<input id="2" type="checkbox" name="Q1" value="incorrect"> Jim <br>
<input id="3" type="checkbox" name="Q1" value="correct"> Callum <br>

Javascript：

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++)
{
      if(inputs[i].type == 'checkbox')
      {
        inputs[i].disabled = true;
      }
}

【讨论】：

然而，这会产生禁用整个页面上的每个复选框的副作用。
@Dremmi，阅读 OP 的标题，它显示：“尝试禁用所有单选按钮”。为什么你喜欢投反对票？
@Drenmi：OP 应该决定哪种解决方案更适合他的特殊情况。再说一遍：id 必须以字母开头，否则不是有效的 HTML。