prop()とは？

「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できる。特によく使われるのが、フォームをjQueryで操作する時に必須となる「checked」などのプロパティを扱うケース。

HTML要素の属性を取得する方法

<body>
<p id="text">サンプルテキスト</p>

<script>
    var id = $('p').prop('id');

    console.log( id );//text
</script>
</body>

HTML要素の属性を設定する方法

<body>
<p id="text">サンプルテキスト</p>

<script>
    var id = $('p').prop('id', 'sample');

    console.log( id );//sample
</script>
</body>

prop()の引数にfunctionを設定する

<form id="myForm">
  <input type="text" name="name">
  <button type="submit" id="submitBtn">送信</button>
</form>

<script>
$('#myForm').on('submit', function() {
  $('#submitBtn').prop('disabled', function(i, old) {
    return !old; // 現在の状態を反転 → disabledになる
  });
});
</script>

複数の属性を設定する方法

<input type="checkbox" id="chk1">

<script>
$('#chk1').prop({
  checked: true,
  disabled: false
});
</script>

prop()とattr()を区別するには？

attr()で「checked」を取得する

<body>
<input type="checkbox" checked>

<script>
    var check = $('input').attr('checked');

    console.log( check );//checked
</script>
</body>

「checked」が存在していれば実行結果のように「checked」の文字列が取得でき、無ければ「undefined」が取得できる

prop()で「checked」を取得する

<body>
<input type="checkbox" checked>

<script>
    var check = $('input').prop('checked');

    console.log( check );//true
</script>
</body>

attr()は、checkedの記述があるかどうかを確認する
prop()は、checkedの状態（チェックされたかどうか）を確認する

まとめ

prop()は属性を取得したり再設定することができる
prop()は引数に関数を使って条件分岐することも可能
attr()は属性の存在有無だけを確認するが、prop()は状態を確認する