❮❮ PREV NEXT ❯❯

SELECTORS - :disabled Selector

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

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>
      
			$(':disabled').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 disabled(Using 'css()' function provided by JQuery).

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

And we can see that there is one <input> element that has 'disabled="disabled"'.

Thus the contents of,

<input type = "text" disabled="disabled">

Gets highlighted with the green color.

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

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

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

❮❮ PREV NEXT ❯❯