Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 331
Deepu Sasidharan Avatar asked Apr 09 '15 07:04

Deepu Sasidharan


3 Answers

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/

like image 112
jmgross Avatar answered Sep 30 '22 01:09

jmgross


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.

like image 40
Eric T Avatar answered Sep 30 '22 03:09

Eric T


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;
});
like image 33
venox Avatar answered Sep 30 '22 02:09

venox