jQuery .prop() Method

What Is .prop()?

.prop() (since 1.6) gets or sets live DOM properties on matched elements — runtime state like checked, disabled, and selectedIndex.

// Get (first element only)
var on = $("input").prop("checked");

// Set boolean state
$("input").prop("checked", true);
$("input").prop("disabled", false);

// Prefer .val() for typed text
$("input").val("someValue");

How to Use .prop()

Same overload shapes as .attr(), but for properties.

1. Select the element(s).
2. Get: .prop("checked") — first match only.
3. Set one: .prop("disabled", true) — every match.
4. Set many: pass a plain object of property/value pairs.
5. Compute: .prop("checked", function (i, val) { return !val; }).

Pseudocode

if called as .prop(name):
    return property name on first matched element
    // undefined if unset or empty selection

if called as .prop(name, value):
    for each matched element:
        set property name = value

if called as .prop(object):
    for each key in object:
        set that property on every matched element

if called as .prop(name, fn):
    for each matched element with index i:
        next = fn(i, currentProperty)
        if next is not undefined: set property to next

Cheat Sheet

Keep these facts handy for form and boolean state.

Live Preview

Toggle the sample checkbox with .prop(), or compare against .attr() and :checked.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer .val() for typed field text.

$("input").on("change", function () {
  var $input = $(this);
  $("#out").text(
    "attr: " + $input.attr("checked") +
    " | prop: " + $input.prop("checked") +
    " | :checked: " + $input.is(":checked")
  );
}).trigger("change");

Initially checked:
attr: checked | prop: true | :checked: true

After uncheck: prop and :checked become false;
attr still reflects the initial attribute.

$("#agree").prop("checked", true);
$("#out").text("checked → " + $("#agree").prop("checked"));

checked → true

$("input[type='checkbox']").prop({
  disabled: true
});

$("#out").text(
  "disabled count → " +
  $("input[type='checkbox']:disabled").length
);

disabled count → 3

$("input[type='checkbox']").prop("checked", function (i, val) {
  return !val;
});

$("#out").text(
  $("input[type='checkbox']").map(function () {
    return $(this).prop("checked");
  }).get().join(", ")
);

Starting true, false, true → after toggle:
false, true, false

$("#city").prop("selectedIndex", 2);
$("#out").text(
  "selectedIndex → " + $("#city").prop("selectedIndex") +
  " | value → " + $("#city").val()
);

selectedIndex → 2 | value → Chennai

Performance Notes

Property access is inexpensive. Prefer one selection plus a callback or object setter over repeated queries in tight loops.

Key Takeaways