HTML input type element have attribute disabled
<input id="input11" type="text" class="namesdiv" disabled="disabled" />
disabled attribute default value is disabled so it disabled by default.
In HTML you can enabled and disabled by input box following way
1 . Using FieldSet element .
2. Using Element Id
Here is exmaple Java script code ...
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Java Script Enabled and Disabled </title>
</head>
<body>
<center>
<h1> HTML Input Box Enabled and Disabled By Java Script</h1>
<h2> First Method 1</h2>
<p></p>
<div id="name">
<fieldset id="namefield" disabled="disabled">
Name 1 : <input id="input1" type="text" /></br> </br>
Name 2 : <input id="input2"type="text" /></br> </br>
Name 4 : <input id="input3" type="text" /></br> </br>
Name 3 :<input id="input4" type="text" /></br> </br>
</fieldset
</div>
</br>
<input id ="namebutton1" type="button" value="Activate"
onclick="showAndHideByfieldsetId()"></input>
<p></p>
<div id="namediv2" >
<h2> Second Method 2</h2>
Name 1 : <input id="input11" type="text" class="namesdiv" disabled="disabled" /></br> </br>
Name 2:<input id="input22" type="text" class="namesdiv" disabled="disabled" /></br> </br>
Name 3 : <input id="input33" type="text" class="namesdiv" disabled="disabled" /></br> </br> Name 4 :<input id="input44" type="text" class="namesdiv" disabled="disabled" /></br> </br>
</div>
<input id="namebutton" type="button" value="Activate"
onclick="showAndHideByClassName()"></input>
</center>
<script type="text/javascript">
function showAndHideByfieldsetId(){
var value =document.getElementById("namefield").disabled
if(value){
document.getElementById("namefield").disabled=false
document.getElementById("namebutton1").value="Deactivate"
}else{
document.getElementById("namefield").disabled=true
document.getElementById("namebutton1").value="Activate"
}
}
function showAndHideByClassName(){
var names =document.getElementsByClassName("namesdiv");
console.log("div 2 element list :: "+names);
var namesList = Array.from(document.getElementsByClassName("namesdiv"))
for(let elemnt of namesList){
var value =document.getElementById(elemnt.id).disabled
if(value){
document.getElementById(elemnt.id).disabled=false
}else{
document.getElementById(elemnt.id).disabled=true
} }
if("Activate"==document.getElementById("namebutton").value){
document.getElementById("namebutton").value="Deactivate"
}else if ("Deactivate"==document.getElementById("namebutton").value){
document.getElementById("namebutton").value="Activate"
}
}
</script>
</body>
</html>
Browser Window Disabled Input box
Browser Window After click on activate button Input box
No comments:
Post a Comment