How to remove “disabled” attribute from HTML input element using JavaScript ?
The task is to remove the disabled attribute from the input element using JavaScript. There are two approaches that are discussed below.
Approach 1: Select the input element and use disabled property and set its value to false.
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to remove “disabled” attribute from
HTML input element using JavaScript ?
</
title
>
<
style
>
body {
text-align: center;
}
h1 {
color: green;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
>
Click on the button to remove disabled attribute
</
p
>
Type:
<
input
id
=
"input"
disabled />
<
br
>
<
br
>
<
button
onclick
=
"myGFG()"
>
Click Here
</
button
>
<
p
id
=
"gfg"
>
</
p
>
<
script
>
var down = document.getElementById("gfg");
function myGFG() {
document.getElementById('input').disabled = false;
down.innerHTML = "Disabled Attribute removed";
}
</
script
>
</
body
>
</
html
>
- Output:
Approach 2: Select the input element and use disabled property and set its value to false. This example selects input element by its class.
- Example:
<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>
How to remove “disabled” attribute from
HTML input element using JavaScript ?
</
title
>
<
style
>
body {
text-align: center;
}
h1 {
color: green;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
p
>
Click on the button to remove disabled attribute
</
p
>
Type:
<
input
id
=
"input"
disabled />
<
br
>
<
br
>
<
button
onclick
=
"myGFG()"
>
Click Here
</
button
>
<
p
id
=
"gfg"
>
</
p
>
<
script
>
var down = document.getElementById("gfg");
function myGFG() {
var input = document.getElementsByClassName('inputClass');
for (var i = 0; i <
input.length
; i++) {
input[i]
.disabled
=
false
;
}
down.innerHTML
=
"Disabled Attribute removed"
;
}
</script>
</
body
>
</
html
>
- Output: