bootstrapのbuttonメソッドの注意

cyrus07424cyrus07424

bootstrapのbuttonメソッドを使用すると、ボタンの状態遷移を実現できる。

<button type="button" id="exampleButton" data-loading-text="読み込み中" class="btn btn-default">
  送信
</button>
// ボタンのラベルと無効状態が変化する
$("#exampleButton").button("loading");

また状態をリセットする場合は以下のようにする。

// ボタンのラベルと無効状態をリセット
$("#exampleButton").button("reset");

ただし、リセット処理は非同期で実行されるため、リセット完了後にすぐボタンに対して別の操作を行おうとした場合、うまく処理されない。

// ボタンのラベルと無効状態をリセット
$("#exampleButton").button("reset");
// ボタンを再度無効にする
$("#exampleButton").prop("disabled", true); // 処理されない

このような場合、setTimeoutを利用する。不格好だがこれ以外の解決方法が存在しない模様。

// ボタンのラベルと無効状態をリセット
$("#exampleButton").button("reset");
// ボタンを再度無効にする
setTimeout(function(){
    $("#exampleButton").prop("disabled", true); // 処理される
}, 0);