HTML | DOM Select disabled Property
Last Updated :
09 Jun, 2022
The DOM Select disabled Property in HTML DOM is used to set or return whether a drop-down list should be disabled. A disabled element is un-clickable or unusable and is usually rendered grey color by default in Browser. This Property is used to reflect the HTML disabled attribute.
Syntax:
Property Values:
- true: It specify that the drop-down list would be disabled.
- false: It specify that the drop-down list would not be disabled. It is false by default.
Return Value: It returns a boolean value which represents that the dropdown list would be disabled or not.
Example: This Example returns a disabled Property,
<!DOCTYPE html>
< html >
< head >
< title >
Select disabled Property in HTML
</ title >
< style >
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >
GeeksforGeeks
</ h1 >
< h2 >
Select disabled Property
</ h2 >
< select name = "Courses Titles"
id = "myCourses"
disabled>
< option value = "C++" >c++</ option >
< option value = "Placement" >Placement</ option >
< option value = "Java" >Java</ option >
< option value = "Python" >Python</ option >
</ select >
< p >
To return a disabled course from the
dropdown list, double-click the "Select" button.
</ p >
< button ondblclick = "My_list()" >
Select
</ button >
< p id = "sudo"
style="font-size:24px;
color:green">
</ p >
< script >
function My_list() {
var g = document.getElementById(
"myCourses").disabled;
document.getElementById("sudo").innerHTML = g;
}
</ script >
</ body >
</ html >
|
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example sets the disabled Property.
<!DOCTYPE html>
< html >
< head >
< title >
Select disabled Property in HTML
</ title >
< style >
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >
GeeksforGeeks
</ h1 >
< h2 >
Select disabled Property
</ h2 >
< select name = "Courses Titles"
id = "myCourses"
disabled>
< option value = "C++" >c++</ option >
< option value = "Placement" >Placement</ option >
< option value = "Java" >Java</ option >
< option value = "Python" >Python</ option >
</ select >
< p >
To set a disabled course from the dropdown
list, double-click the "Select" button.
</ p >
< button ondblclick = "My_list()" >
Select
</ button >
< p id = "sudo"
style="font-size:24px;
color:green">
</ p >
< script >
function My_list() {
var g = document.getElementById(
"myCourses").disabled = "false";
document.getElementById("sudo").innerHTML = g;
}
</ script >
</ body >
</ html >
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...