When designing a disabled input on a website, sometimes we need to add or remove the ‘disable‘ correctly in the input tag. And in this case we have to check if an element is disabled using JavaScript So, in this article, we will show you how to use disabled property and some built-in methods to do it.
How to check if an element is disabled using JavaScript
A disabled element is an element that cannot be interacted with by users. For instance, if the button is disabled, users can’t click it; if the input is disabled, users can’t enter it.
Below, we will show you three simple ways to check if an input is a disabled element or not.
Using disabled property
We’ve introduced this property here. So, you can see more if you want.
To check whether an element is disabled or not, we get the disabled state of an element by element.disabled. If it is true, our element is a disabled element, and vice versa.
Suppose we have the following HTML structure:
<main id="app"> <form> <input type="email" value="[email protected]" disabled /> <input type="password" placeholder="Enter your password" /> </form> </main> <script src="script.js"></script>
And this is how we check if the input element is a disabled element:
const email = document.querySelector("input[type='email']")
const password = document.querySelector("input[type='password']")
function checkDisabled(element) {
// Check disabled using the disabled attribute
let isDisabled = element.disabled
if (isDisabled) {
console.log("This is a disabled element")
return
}
console.log("This is not a disabled element")
}
// Check if email and password are disabled or not
checkDisabled(email) // Expected: disabled
checkDisabled(password) // Expected: not disabledOutput:
This is a disabled element
This is not a disabled elementUsing the hasAttribute() method
If the DOM element contains the attribute we passed to it. The hasAttribute() method will return true.
Based on that, we will pass ‘disabled‘ to the hasAttribute() method. If it returns true, our element is a disabled element. If it returns false, our element is not a disabled element. For example:
const email = document.querySelector("input[type='email']")
const password = document.querySelector("input[type='password']")
function checkDisabled(element) {
// Check disabled using the hasAttribute() method
if (element.hasAttribute("disabled")) {
console.log("This is a disabled element")
return
}
console.log("This is not a disabled element")
}
// Check if email and password are disabled or not
checkDisabled(email) // Expected: disabled
checkDisabled(password) // Expected: not disabledOutput:
This is a disabled element
This is not a disabled elementUsing Element.attributes
Element.attributes returns a collection of all attributes in an element, including the disabled. Therefore, we can use it to get the disabled value. Like this:
const email = document.querySelector("input[type='email']")
const password = document.querySelector("input[type='password']")
function checkDisabled(element) {
// Check disabled using the element.attributes.disabled
if (element.attributes.disabled) {
console.log("This is a disabled element")
return
}
console.log("This is not a disabled element")
}
// Check if email and password are disabled or not
checkDisabled(email) // Expected: disabled
checkDisabled(password) // Expected: not disabledOutput:
This is a disabled element
This is not a disabled elementSummary
We just showed you what a disabled element is and how to check if an element is disabled using JavaScript. Hopefully, the knowledge in this short article can benefit you. See you in future posts!
Maybe you are interested:
- Check if an Element is Required using JavaScript
- Check If An Element Is Read-Only Using JavaScript
- Check if an element is a checkbox using javascript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
