関数からjQueryダイアログのボタンを無効にするにはどうすればよいですか？
ユーザーに特定の情報の入力を要求するjQueryダイアログがあります。このフォームには、「続ける」ボタンがあります。この「続行」ボタンは、すべてのフィールドに内容が含まれている場合にのみ有効にします。それ以外の場合は無効のままにします。
フィールドのステータスが変わるたびに呼ばれる関数を書きました。ただし、この機能からダイアログボタンを有効または無効にする方法はわかりません。私は何をすべきか？
おっとと私はこれらのボタンが次のように作成されたことを言及するのを忘れていました：
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 'auto',
width: 700,
show: 'clip',
hide: 'clip',
modal: true,
buttons: {
'Add to request list': function() {
$(this).dialog('close');
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
})
});
無効なプロパティ を設定します。
$('#continueButton').attr("disabled", true);
更新：ああ、複雑さがわかりました。 jQueryダイアログ には（「ボタン」セクションの下に）1行が使われます。
var buttons = $('.selector').dialog('option', 'buttons');
ダイアログからボタンコレクションを取得し、それをループ処理して必要なものを見つけて、上記のようにdisabled属性を設定する必要があります。
とても簡単です。
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
単純な作業を複雑にし過ぎています。 jQueryUIダイアログには、理由でボタンを設定する2つの方法があります。
ボタンごとにクリックハンドラを設定するだけでよい場合は、Object引数を取るオプションを使用します。ボタンを無効にして他の属性を指定するには、Array引数を取るオプションを使用します。
次の例では、ボタンを無効にし、すべてのjQueryUI CSSクラスと属性を適用してボタンの状態を正しく更新します。
ステップ1 - Arrayのボタンでダイアログを作成します。
// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
{
id: "done"
text: "Done",
click: function() { ... }
},
{
id: "cancel"
text: "Cancel",
click: function() { ... }
}
] });
ステップ2 - ダイアログが作成された後に[完了]ボタンを有効/無効にします。
// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");
// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
if (button.id === "done") {
button.disabled = true;
}
})
// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);
ボタンのIDを提供するダイアログを作成すると、
$("#dialog").dialog({ buttons: [ {
id: "dialogSave",
text: "Save",
click: function() { $(this).dialog("close"); }
},
{
id: "dialogCancel",
text: "Cancel",
click: function() { $(this).dialog("close");
}
}]});
次のコードでボタンを無効にすることができます。
$("#dialogSave").button("option", "disabled", true);
ボタンを名前で検索できるようにしたい（私のjQuery UIダイアログには複数のボタンがあるので）。また、ページ上にいくつかのダイアログがあるので、特定のダイアログのボタンを取得する方法が必要です。これが私の機能です：
function getDialogButton( dialog_selector, button_name )
{
var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
for ( var i = 0; i < buttons.length; ++i )
{
var jButton = $( buttons[i] );
if ( jButton.text() == button_name )
{
return jButton;
}
}
return null;
}
// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
buttons: {
Cancel: function() { $(this).dialog('close'); },
Submit: function() { ... }
} );
// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}
これにより、ボタンが無効になります。
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
ページに複数のダイアログがある場合は、ダイアログIDを追加する必要があります。
これは、一度クリックされたボタンを無効にするように変更された質問のサンプルです。
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 'auto',
width: 700,
show: 'clip',
hide: 'clip',
modal: true,
buttons: {
'Add to request list': function(evt) {
// get DOM element for button
var buttonDomElement = evt.target;
// Disable the button
$(buttonDomElement).attr('disabled', true);
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}
また、次の質問も役に立ちます。 jQuery UIダイアログのボタンを無効にするにはどうすればよいですか？
ダイアログDIV自体を返すメソッド .dialog("widget") を使ってこれを動作させました。あなたがダイアログメソッドにいるならば：
$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
ダイアログボタンを無効にする（または他の操作を実行する）簡単な方法を見つけました。
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
ダイアログの親を選択して、すべてのボタンを見つけるだけです。ボタンのテキストを確認して、ボタンを識別できます。
ユーザビリティの観点から見ると、通常はボタンを有効にしたままだが、誰かが不完全なフォームを送信しようとした場合はエラーメッセージを表示する方が良いでしょう。クリックしたいボタンが無効になっていて、その理由がわからない場合は、気が動かなくなります。
これを試して：
$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
母は、ちょうど底にアクセスするための興味深い方法を見つけました
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
あなたは、引数にイベントオブジェクトがあることをあなた全員が知らないようです...
ちなみに、コールバック内からボタンにアクセスするだけです。一般的には、アクセス用のIDを追加するのが良いでしょう。
これがjQueryダイアログ用の私のenableOk関数です。
function enableOk(enable)
{
var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
if (enable) {
dlgFirstButton.attr('disabled', '');
dlgFirstButton.removeClass('ui-state-disabled');
} else {
dlgFirstButton.attr('disabled', 'disabled');
dlgFirstButton.addClass('ui-state-disabled');
}
}
"最初の"ボタンは一番右のボタンです。適切な視覚効果を得るために、ボタンを無効にし、ダイアログの無効クラスを設定します。
従来のjQuery UI（バージョン1.7.3）では、単純に使用できました。
$('.ui-dialog-buttonpane button')[0].disabled=true;
dOM要素自体のボタンを無効にするだけです。新しいjQuery UI（バージョン1.8.7）にアップグレードしたので、このメソッドはFirefoxでは機能しなくなりましたが、ボタンjqueryオブジェクトの無効化機能および有効化機能をjquery UIボタン固有のコールと呼びます。
$('.ui-dialog-buttonpane button').eq(0).button('disable');
私は似たようなことをしようとしている人々に適用されるかもしれない回避策を見つけました。ボタンを無効にする代わりに、チェックボックスがチェックされているかどうかをチェックするために、単純なifステートメントを関数に入れました。
そうでなかったら、それは提出の前に箱がチェックされなければならなかったという単純なメッセージを表示しました。
例えば：
$("#confirmation-dialog").dialog({
modal: true,
autoOpen: false,
width: 600,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
close: function() {
$('input[type="submit"]')
.val('Record Reading')
.attr('disabled', false);
},
buttons: {
'Confirm Reading': function() {
if($('#check-box').attr("checked")){
$(this).dialog('close')
$('form')
.addClass('confirmed')
.submit();
}
else {
$('#please-check').show("slide");
}
}
}
});
とにかく、それが誰かに役立つことを願っています。
あなたが本当にボタンを無効にしたいのであれば、私はあなたもそれに.unbind（）メソッドを呼び出す必要があることを発見しました。そうでなければ、ボタンはまだアクティブであり、ダブルクリックは複数のフォーム送信につながる可能性があります。次のコードは私のために働きます：
button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
この作業を少し簡単にするために、jQuery関数を作成しました。これをJavaScriptファイルに追加するだけです。
$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
var text = $(this).text();
if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
if(text==name){return this;}
if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};
クラス 'dialog'のダイアログで 'OK'ボタンを無効にします。
$('.dialog').dialogButtons('Ok', 'disabled');
すべてのボタンを有効にする：
$('.dialog').dialogButtons('enabled');
「閉じる」ボタンを有効にして色を変更します。
$('.dialog').dialogButtons('Close', 'enabled').css('color','red');
これが役に立つことを願っています。
Nickが行ったのと同じような関数を作成しましたが、私の方法ではdialogClassを設定する必要はなく、idを使って特定のダイアログのボタンを取得することができます（アプリケーションに複数存在する場合）。
function getDialogButton( dialog_id, button_name) {
var target = '#'+dialog_id;
var buttons = $(target).parent().find('button');
for ( var i=0; i<buttons.length; ++i ) {
var jButton = $( buttons[i] );
if ( jButton.text() == button_name ) {
return jButton;
}
}
return null;
}
あなたがそのようにダイアログを作成したならば：
$(function() {
$("#myDialogBox").dialog({
bgiframe: true, height: 'auto', width: 700, modal: true,
buttons: {
'Add to request list': function() {
$(this).dialog('close');
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
次のようにしてボタンを取得できます。
var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn = getDialogButton('myDialogBox','Cancel');
無効にするには：
addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');
有効にする：
addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
記録のためだけに、この記事は私が私の問題を解決するのを助けました。つまり、disabled属性をfalseではなくdisabledに設定する必要があります。
_send_button.attr('disabled','disabled');
これがすべてのコードの外観です。無効にするためのスタイルもいくつか追加しました。
var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);
私はそれがすべてとうまくいくはずだと思います、
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').dialog('open');
$(function(){
$('#dialog').dialog({
autoOpen: true,
width: 400,
modal: true,
overlay: {
opacity: 0.8,
background: "black"
},
resizable: false,
show: 'slow',
buttons: {
//"OK":function() {
// window.location="index.php?view=list";
//},
"Cancel": function() {
$(this).dialog("close");
$(this).attr("class", "button");
}
}
});
var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
dlgFirstButton.addClass('button');
});
});
</script>
これは、ボタン割り当てのArrayメソッドを使用して実装した例です。これにより、最初に認められた答えと同じように、後でIDセレクタを使用して、ボタンを有効または無効にし、ボタンを完全に表示または非表示にできますやってます。
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 500,
width: 450,
modal: true,
buttons: [
{
id: "submit_btn",
text: "Make Apointment",
click: function() {
//do ajax
}
},
{
id: "cancel_btn",
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
id: "ok_btn",
text: "OK",
click: function() {
$( this).dialog('close');
},
disabled: "disabled"
}],
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
送信に成功したら、2つのボタンを無効にして非表示にし、デフォルトで無効になっていた[OK]ボタンを有効にします。
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
お役に立てれば。
残念ながら、ここで与えられた解決策はページ上のいくつかのダイアログに対してうまくいきませんでした。
また問題は、元のダイアログ自体にボタン区画が含まれていないことですが、その兄弟であるということです。
だから私はそのようなダイアログIDで選択することを思い付きました：
var getFirstDialogButton = function (dialogSelector) {
return $('.ui-dialog-buttonpane button:first',
$(dialogSelector).parent()[0]);
};
...
$('#my_dialog').dialog({
open: function(event, ui) {
getFirstDialogButton("#my_dialog")
.addClass("ui-state-disabled").attr('disabled', 'disabled' );
},
...
その後、同じgetFirstDialogButton（）関数を後で使用してボタンを有効にすることができます。検証が成功した後。
誰かに役立つことを願っています。
ダイアログボックスの[保存]ボタンを無効にするには、関数内で次の行を使用します。
$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");
ボタン内のテキストを変更するには、次の行を使用します（これにより、キャンセルボタンのテキストが[閉じる]に変更されます）。
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
もちろん.attr("disabled", true)を呼び出すことはできますが、jQueryを使ってもっと砂糖でやりたいので、私は簡単な拡張を書きました。
(function( $ ) {
$.fn.disable = function(isDisabled) {
var val = isDisabled;
if (isDisabled === undefined)
val = true;
this.attr("disabled", val);
};
$.fn.enable = function(isEnabled) {
var val = !isEnabled;
if (isEnabled === undefined)
val = false;
this.attr("disabled", val);
}
})( jQuery );
これで関数enable()とdisable()ができたので、そのように仕事をすることができます：
$('#continueButton').disable();
どれが同じ
$('#continueButton').disable(true);
そして
$('#continueButton').enable(false);
JQueryの世界で、一連のDOM要素からオブジェクトを選択したい場合は、 eq（） を使用してください。
例：
var button = $（ 'button'）。eq（1）;
または
var button = $（ 'button：eq（1）'）;
これは私のために仕事をしました：
$find("<%= btnPrint.ClientID %>").set_enabled(true);
@Chris次のコード行を使用して、チェックボックスをオンまたはオフにするまでダイアログボタンを有効または無効にできます。
<div id="dialog-confirm" title="test">
<label>Enable Confirm?<input type="checkbox" checked /></label>
</div>
$("#dialog-confirm").dialog({
resizable: false,
height:240,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Confirm': function() {
$(this).dialog('close');
}
}
});
$("#dialog-confirm :checkbox").change(function() {
$(".ui-dialog-buttonpane button:contains('Confirm')")
.button(this.checked ? "enable" : "disable");
});
1つのボタンを無効にするには、ダイアログが開いたときに次のようにします。
$("#InspectionExistingFacility").dialog({
autoOpen: false, modal: true, width: 700, height: 550,
open: function (event, ui) {
$("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
},
show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});
jQuery Solutionは私のために働きます。
$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);
クリックされたときに誰かがボタンをロード中のアニメーションのようなものに置き換えようとしている場合（たとえば、「送信」ボタンがダイアログ内のフォームを送信するとき） - ボタンを次のように画像に置き換えることができます。
...
buttons: {
"Submit": function(evt) {
$(evt.target).closest('button').replaceWith('<img src="loading.gif">');
}
}
のドキュメントによると：
https://api.jqueryui.com/dialog/#option-buttons
// Setter
$( ".selector" ).button( "option", "disabled", true );
単にボタンを選択できるようにするには、ボタンに独自のCSSクラスを追加します。これは有効/無効にする必要があります。
// while initializing
$("#dialog").dialog({
...
buttons: [{
disabled: true,
text: "Add to request list",
click: function (e: JQueryEventObject) {
// Some logic
},
"class": "myDialogButton"
}]
...
});
その場合、有効化/無効化は次のようになります。
$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);
トリガーポイントまで表示したくないボタンが1つありました。
最初に私はこれを試しました： -
$(":button:contains('OK')").hide();
しかし、行が残っているので（それらはすべて消えてしまったので！）、代わりに私のCSSにこれを追加しました： -
.ui-dialog .ui-dialog-buttonpane {
display: none;
}
これはすべてのボタンを隠します。
必要に応じて私は再び有効にすることができます： -
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button