jQuery aタグに.prop()と.attr()した時では挙動が違うっぽい？

ラジオボタンやチェックボックスのcheckedされているかの確認やjsでのon/off、セレクトボックスのselected、フォームパーツをdisabledにする時に.prop()が推奨されているので

var $checkbox = $('#checkbox')
// checkedされているかの確認 true or false
$checkbox.prop('checked');
// チェックボックスをcheckedにする
$checkbox.prop('checked', true);
// disabledにする
$checkbox.prop('disabled', true);

の様な感じで使っています。

フォームの処理をjsで行うような時など、buttonではなくaタグを使うことも多いで、
aタグのボタンもdisabledにしたい時などがあります。

でも、aタグの時.prop()でdisabledにしようとすると挙動がヘンでした...

さんぷる。

<!-- HTML -->
<a id="ababa" href="#">ボタン</a>

// javascript
var $a = $('#ababa');

// .propでaタグをdisabledにしたい。
$a.prop('disabled', true);

// DOMを確認してみる
$a.get(0);
// -> <a id="ababa" href="#">ボタン</a>
// disabled属性が付いてない？

// propで確認
$a.prop('disabled');
// -> true
// trueが返ってきている...

// attrで確認
$a.attr('disabled');
// -> "disabled"
// disabled属性が付いていることになっている

// is(':disabled') で確認
$a.is(':disabled');
// -> false
// disabled判定にはならない

と、inputなど.prop('disabled', true)はDOMにdisabled="dieabled"が見える状態でつくのですが、
aタグのDOMにdisabled="dieabled"が付かない(見えない)ので結構不安な感じになりました。。。
is(':disabled')はfalseになってしまいました。


.attr('disabled', true)でも試してみました。

// javascript
$a.attr('disabled', true);

// DOMを確認してみる
$a.get(0);
// -> <a id="ababa" href="#" disabled="disabled">ボタン</a>
// disabled属性が見えます。

// propで確認
$a.prop('disabled');
// -> undefined
// undefinedが返ってきました

// attrで確認
$a.attr('disabled');
// -> "disabled"
// disabledが帰ってきます。

// is(':disabled') で確認
$a.is(':disabled');
// -> false

aタグに.attr()でdisabled属性を付けつると.prop()でdisabledは判定できないっぽいです。
で、どうやらフォームパーツ以外は.prop('disabled')で返される値に関係なく
.is(':disabled')でdisabledの判別はできないっぽいです。

なので、フォームパーツ以外にdisabled属性を付けてそれを判別したい時は.attr()を使って

if( $a.attr('disabled') ) {
  // disabled属性がある時
} else {
  // disabled属性が無い時
}

の様に判定するのが良さそうです。



.prop()はフォームパーツに使って、それ以外の要素の属性変更は基本的に.attr()を使うのが良いのかもと思いました。(data-以外)

consoleに書きながら調べてたので、違っている部分があるかもしれません。。。