在 Javascript 中使用类名禁用文本框

Question

我有 HTML

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

Javascript

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

但是文本框仍然启用。如何在 JAVASCRIPT 中使用

classname

禁用 text box。

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

但是我需要一个使用

Javascript

和

classname

的解决方案。

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/

Answer 2

你可以尝试一下，我敢打赌这就是你正在看的。

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

JSFiddle :- 单击禁用。

Answer 3

Mozilla docs 指出：

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

所以你必须迭代 getElementsByClassName 的结果。

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

Answer 4

2023 更新

我确信这个问题在其他地方已经有了答案，但以下是 ES6 的一个很好的答案：

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