1. ホーム
  2. jquery

[解決済み] jQuery UIダイアログのボタンを無効化するには?

2022-05-09 14:59:08

質問内容

ボタンを無効化する方法 jQuery UI ダイアログ上の . 上のリンクにあるどのドキュメントにも、このことが書かれていないようなのです。

モーダル確認に 2 つのボタン ("Confirm" と "Cancel") を使用しています。特定のケースでは、"Confirm" ボタンを無効にしたいのですが、どうすればよいですか?

どのように解決するのですか?

を含む場合 .button() プラグイン/ウィジェット を使用すると、jQuery UIが含む(フルライブラリを持っていて1.8以上であれば、持っている)ボタンを無効化することができます。 は、このように視覚的に状態を更新します。

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

こちらでお試しいただけます ...または、古いバージョンやボタンウィジェットを使用していない場合は、このように無効化することができます。

$(".ui-dialog-buttonpane button:contains('Confirm')").attr("disabled", true)
                                              .addClass("ui-state-disabled");


もし、特定のダイアログの中、例えばIDで欲しいのであれば、こうしてください。

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

その他の場合 :contains() が誤検出をする可能性がある場合は .filter() のようなものですが、2つのボタンを知っている以上、ここではオーバーキルです。 もし というのは、他の場面ではこのようになりますね。

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

を防ぐことができます。 :contains() が他の何かの部分文字列とマッチしないようにします。