attr and prop

attr and prop: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 19 of 100

attr and prop

Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects

Setup & DOM · 1 — Select · ~6 min · DOM Updates

What is this?

attr() talks to HTML attributes as written in markup. prop() talks to DOM properties (checked, disabled, selected, value as live state). For booleans, prefer prop().

Why should you care?

Disabled save buttons and checked agreements in QueryVerse break if you mix attr("disabled") with prop("checked") carelessly.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <input type="checkbox" id="tos" checked>
  <label for="tos">I agree</label>
  <button type="button" id="save">Save</button>
  <button type="button" id="toggle">Toggle agree</button>
  <button type="button" id="lock">Lock save</button>
  <pre id="out" class="box muted"></pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  function report() {
    $('#out').text(JSON.stringify({
      attrChecked: $('#tos').attr('checked'),
      propChecked: $('#tos').prop('checked'),
      saveDisabled: $('#save').prop('disabled')
    }, null, 2));
  }
  $('#toggle').on('click', function () {
    $('#tos').prop('checked', !$('#tos').prop('checked'));
    report();
  });
  $('#lock').on('click', function () {
    $('#save').prop('disabled', true);
    report();
  });
  report();
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <input type="checkbox" id="tos" checked>
  <label for="tos">I agree</label>
  <button type="button" id="save">Save</button>
  <button type="button" id="toggle">Toggle agree</button>
  <button type="button" id="lock">Lock save</button>
  <pre id="out" class="box muted"></pre>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  function report() {
    $('#out').text(JSON.stringify({
      attrChecked: $('#tos').attr('checked'),
      propChecked: $('#tos').prop('checked'),
      saveDisabled: $('#save').prop('disabled')
    }, null, 2));
  }
  $('#toggle').on('click', function () {
    $('#tos').prop('checked', !$('#tos').prop('checked'));
    report();
  });
  $('#lock').on('click', function () {
    $('#save').prop('disabled', true);
    report();
  });
  report();
});
</script>
</body>
</html>

Result

What happened?

attr("checked") may be undefined after user toggles even if the box is checked — prop("checked") tracks live state.
Use attr for data-* and href strings; prop for booleans and selectedIndex-style state.