CODEWITHSUNDEEP
javascriptgetelementsbyclassname
Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Disable text box using class name in Javascript

I have HTML

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

Javascript

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

But the text box is still enabled. How can I disable text box using the classname in JAVASCRIPT.

Using id I can do this. Also using jquery.

But I need a solution using Javascript and classname.

Upvotes: 9

Views: 21604

Answers (4)

mankowitz
mankowitz

Reputation: 2051

2023 Update

I'm sure this is answered elsewhere, but the following is a good answer with ES6:

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

Upvotes: 0

Eric T
Eric T

Reputation: 1026

You may try this, and I bet is what you are looking at.

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

JSFiddle :- Disable on click.

Upvotes: 5

venox
venox

Reputation: 11

Mozilla docs states that:

elements is a live HTMLCollection of found elements.

So you have to iterate through the result of getElementsByClassName.

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

Upvotes: 1

jmgross
jmgross

Reputation: 2336

getElementsByClassName return a list of elements, you need to loop througth it to disable each element :

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

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

Upvotes: 12

Related Questions