jQuery prop() Method

Last Updated:

jQuery prop() Method

The jQuery prop() method gets or sets properties and values of the selected elements.

Note: The following points to be considered when using the jQuery prop() method

  • When this method is used to get property value, it gets the value of the first matched element.
  • When this method is used to set property value, it will overwrite all matched elements.

In the following example, we will get the property value of the <input> tag.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery prop() Method</h1> <p>Click on the button to check whether the input is disabled or not.</p> <input type="text" disabled> <button>Check out</button> <script> $(document).ready(function(){ $("button").click(function(){ alert("Disabled : " + $("input").prop("disabled")); }); }); </script> </body> </html>

Syntax

// Get property value $(selector).prop(property); // Set property value $(selector).prop(property, value); // Set property value using a function $(selector).attr(property, func); // Set multiple properties and values $(selector).attr({property:value, property:value})

Parameter Values

Value Explanation
property Specifies the name of the property
value Specifies the value of the property
func Specifies a function that returns the property value to set

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
prop()YesYesYesYesYesYesYesYesYesYesYesYesYes

Set Property Value

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery prop() Method</h1> <p>Click on the button to disable the input</p> <input type="text"> <button>Disable the input</button> <script> $(document).ready(function(){ $("button").click(function(){ $("input").prop("disabled", true); }); }); </script> </body> </html>

Set Custom Property

In the following example, we will set and get the custom property for <span> tag.

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery prop() Method</h1> <p>My Name is <span></span>.</p> <button>Get My Name</button> <script> $(document).ready(function(){ $("button").click(function(){ $("span").prop("name", "Jade"); $("span").text($("span").prop("name")); }); }); </script> </body> </html>

Share this Page

Meet the Author