jQuery prop() function is used to get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Example 1
Display the checked property and attribute of a checkbox as it changes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prop demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(
".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
".is( \":checked\" ): <b>" + $input.is(":checked") + "</b>");
}).change();
</script>
</body>
</html>
Example 2
Disable all checkboxes on the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prop demo</title>
<style>
img {
padding: 10px;
}
div {
color: red;
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked="checked">
<script>
$("input[type='checkbox']").prop({
disabled: true
});
</script>
</body>
</html>
Comments
Post a Comment