Warning: session_start(): open(/tmp/sess_e60072e69208cf5aed99b53502b479a5, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Check If An Element Is Disabled Using JavaScript - LearnShareIT

Check If An Element Is Disabled Using JavaScript

Check if an Element is Disabled using JavaScript

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="btwr@learnshareit.com" 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 disabled

Output:

This is a disabled element
This is not a disabled element

Using 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 disabled

Output:

This is a disabled element
This is not a disabled element

Using 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 disabled

Output:

This is a disabled element
This is not a disabled element

Summary

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:

Leave a Reply

Your email address will not be published. Required fields are marked *