❮❮ PREV NEXT ❯❯

SELECTORS - :enabled Selector

The ':enabled Selector' is used to select all the input elements which doesn't have disabled="disabled". In other words it selects those elements that are enabled.

Say, for example, if you want something to be entered by the user.

And HTML uses the <input> element to achieve the above.

Also the <input type="text" disabled="disabled"> creates a text input disabled. i.e. You cannot enter in that text button.

Let us learn more with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    
    <form >
    	<span> Enter User :: </span>
    	<input type = "text" disabled="disabled">
        <br/>
    	
    	<span> Enter Password :: </span>
    	<input type = "password">
        <br/>
        
        <input type="button" value = "Click Me">
        <br/>
    	
    </form>	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$(':enabled').css("background-color", "green");
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three input elements.

<input type = "text" disabled="disabled">
<input type = "password">
<input type="button" value = "Click Me">

And we want to highlight the color of those input elements that are enabled(Using 'css()' function provided by JQuery).

In other words, we want to highlight the color of those elements that are enabled.

And we can see that there are two <input> elements that doesn't have 'disabled="disabled"'.

Thus the contents of,

<input type = "password">

And

<input type="button" value = "Click Me">

Gets highlighted with the green color.

And this happened with the ':enabled' element selector.

$(':enabled').css("background-color", "green");

And the JQuery code locates the input element those are enabled and changes the color to green.

❮❮ PREV NEXT ❯❯