jQuery prop() Method
You are Here:
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 |
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>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
