jQuery prop() Method

Quiz

The prop() method in jQuery is used to get or set properties of element(s) in a DOM.

If you're trying to get a property value using this method, it gives you the value of the first element that matches your selection. But if you're trying to set property values, it changes the properties of all the elements that match your selection to the values you specify.

If we want to remove a property, we need to use the removeProp() method.

Syntax

We have different syntaxes for setting and getting the properties and values of the selected elements −

Following is the syntax to get the value of a property:

$(selector).prop(property)

Following is the syntax to set the property and value:

$(selector).prop(property,value)

Following is the syntax to set property and value using a function:

$(selector).prop(property,function(index,currentvalue))

Following is the syntax to set multiple properties and values:

$(selector).prop({property:value, property:value,...})

Parameters

This method accepts the following parameters −

property: The name of the property you want to get or set.
value: The value you want to set for the property.
function(index, currentvalue): This is a callback function that will be executed for each selected element. It takes two parameters:

index: The index of the current element in the set of selected elements.
currentvalue: The current value of the property being manipulated for the current element.

Example 1

In the following example, we are using the prop() method to get the property value of the <input> element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
        $('button').click(function() {
            var isChecked = $('#myCheckbox').prop('checked');
            alert('Checkbox is ' + (isChecked ? 'checked' : 'unchecked'));
        });
    });
  </script>
</head>
<body>
    <input type="checkbox" id="myCheckbox" checked>
    <button>Check Status</button>
    <p id="status"></p>
</body>
</html>

When we click the button, the prop() will get the status of a checkbox (checked or unchecked) and display it with an alert box.

Example 2

In this example, we are setting a property value to the <input> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
          $('button').click(function() {
              $('#myCheckbox').prop('checked', true);
          });
      });
  </script>
</head>
<body>
    <input type="checkbox" id="myCheckbox">
    <button>Check Checkbox</button>
</body>
</html>

After executing the above program, it shows the checked property of a checkbox as "true".

Example 3

In the example below, we are using the prop() method with the function parameter −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
          $('button').click(function() {
              $('.checkItem').prop('checked', function(index, currentValue) {
                  return !currentValue;
              });
          });
      });
  </script>
</head>
<body>
    <input type="checkbox" class="checkItem">
    <input type="checkbox" class="checkItem">
    <input type="checkbox" class="checkItem">
    <button>Toggle Checkboxes</button>
</body>
</html>

Here, prop() is used with a function to toggle the checked property of multiple checkboxes when a button is clicked.

Example 4

This example sets multiple properties (disabled and innerHTML) to a button element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
      $('#disableButton').click(function() {
          $('#myButton').prop({
              disabled: true,
              innerHTML: 'Disabled'
          });
      });
  });
</script>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <button id="disableButton">Disable the Button Above</button>
</body>
</html>

When you click one button, it changes the button next to it. The clicked button gets disabled, meaning you can't click it anymore, and its text changes.

jquery_ref_html.htm

Print Page