jQuery prop() example

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.

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>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

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>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References

Comments