jQuery UI Buttonを動的に活性化／非活性化させる

ちょっとハマったのでメモ。。

今まで正常に動いていたボタンの挙動が、jQueryのバージョンを上げたら動かなくなっていたので、調べてみると、以前使用していたバージョン（1.10.4）だと下記で問題ありませんでしたが―――

・1.10.4：活性化

$('.selector').attr('disabled', 'true');

・1.10.4：非活性化

$('.selector').attr('disabled', 'false');

現在使用中のバージョン（1.11.4）だと下記の方法になるようです。

・1.11.4：活性化

$('.selector').attr('disabled', 'true');

・1.11.4：非活性化

$('.selector').removeAttr('disabled');

もしくは、、、

・propメソッドを使った活性化＆非活性化

$('.selector').prop('disabled', false);
$('.selector').prop('disabled', true);

attrメソッドとpropメソッドの違いは、詳しくは「jQueryにおけるattrとpropの違いと使いドコロまとめ – Qiita」が判り易く解説されてます。

使えるところはattrメソッドよりpropメソッドを使え！ですね。

―――で、問題はこれだけですみませんでしたorz

jQuery UI Buttonだとスタイル属性どころか機能すらしないのです。。

しかし、最近よくお世話になるスタックオーバーフローに、こんな「jQuery-ui: enabling disabled button doesn’t restore event – Stack Overflow」答えがありました。

以下、抜粋。

The official answer appears to be

$('.selector').button('option', 'disabled', true);

to disable, and

$('.selector').button('option', 'disabled', false);

to enable a jQueryUI button()

これでスタイル属性共に問題無く機能するようになりました。

ちゃんとオフィシャル読め！ですねｗ；