使用JavaScript按类名禁用文本框

Question

我有 HTML。

Name 1:<input type="text" class="one" id="mytext">
<button onclick="disfunction()"></button>

Javascript

function disfunction(){
document.getElementsByClassName("one").disabled = true;
}

但是文本框仍然启用。我该如何使用classname在JAVASCRIPT中禁用text box。

使用id可以做到这一点。也可以使用jquery。

但我需要使用Javascript和classname来解决。

- Deepu Sasidharan

---

为什么在使用时，更倾向于使用类而不是ID？ - Eric T

Answer 1

getElementsByClassName 返回元素列表，需要遍历它以禁用每个元素：

var cells = table.getElementsByClassName("one"); 
for (var i = 0; i < cells.length; i++) { 
    cells[i].disabled = true;
}

JSFIDDLE：http://jsfiddle.net/7L14zaha/1/

- jmgross

Answer 2

您可以尝试这个，并且我保证这就是您所寻找的。

function disfunction(){
document.getElementsByClassName("one")[0].disabled = true;
}

JSFiddle ：- 点击后禁用。

- Eric T

Answer 3

Mozilla 文档 表示：

elements 是找到的元素的实时 HTMLCollection。

因此，您必须遍历 getElementsByClassName 的结果。

var testElements = document.getElementsByClassName('class-name-here');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    testElement.disabled = true;
});

- venox

Answer 4

2023年更新

我相信这个问题在其他地方已经得到了回答，但以下是一个使用ES6的好答案：

document.querySelectorAll(".class-name").forEach(element => element.disabled = true);

- mankowitz