239

ユーザーが特定の情報を入力する必要がある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');
      }
    }
  })
});
4

33 に答える 33

261

無効なプロパティを設定したいでしょう

 $('#continueButton').attr("disabled", true);

更新：ああ、複雑さがわかりました。jQueryダイアログには、使用できる1行がありました（「ボタン」セクションの下）。

 var buttons = $('.selector').dialog('option', 'buttons');

ダイアログからボタンのコレクションを取得し、それをループして必要なものを見つけ、上で示したように disabled 属性を設定する必要があります。

于 2009-02-23T13:04:06.900 に答える
194

とても簡単です:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
于 2010-01-27T04:07:35.053 に答える
38

あなたは単純なタスクを複雑にしています。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);
于 2010-12-19T00:35:25.593 に答える
32

ボタンの 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);
于 2011-07-05T16:54:24.450 に答える
29

名前でボタンを見つけられるようにしたかった (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' );
}
于 2010-01-18T19:13:15.780 に答える
19

これにより、ボタンが無効になります。

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

ページに複数のダイアログがある場合は、ダイアログ ID を追加する必要があります。

于 2009-08-11T14:20:27.947 に答える
11

クリックするとボタンが無効になるように変更された質問のサンプルを次に示します。

$(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 ダイアログのボタンを無効にするにはどうすればよいですか?

于 2011-04-23T15:52:18.260 に答える
9

ダイアログ ボタンを無効にする (または他のアクションを実行する) 簡単な方法を見つけました。

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

ダイアログの親を選択して、すべてのボタンを見つけるだけです。次に、ボタンのテキストを確認すると、ボタンを識別できます。

于 2010-08-20T06:49:04.113 に答える
9

.dialog("widget")ダイアログDIV自体を返すメソッドでこれを機能させました。ダイアログメソッドを使用している場合:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
于 2011-08-04T10:06:00.007 に答える
8

使いやすさの観点から、通常はボタンを有効のままにしておくことをお勧めしますが、誰かが不完全なフォームを送信しようとするとエラーメッセージが表示されます。クリックしたいボタンが無効になっていると、それは私をイライラさせます。理由はわかりません。

于 2009-09-08T10:31:40.450 に答える
6

これを試して：

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
于 2010-09-03T23:21:13.070 に答える
5

ははは、ボタンにアクセスする興味深い方法を見つけました

$("#dialog").dialog({

      buttons: {
        'Ok': function(e) { $(e.currentTarget).button('disable'); }

      }
 });

引数にイベントオブジェクトがあることを皆さんは知らないようです...

ちなみに、コールバック内からボタンにアクセスするだけなので、一般的にはアクセス用のidをつけておくと良いです

于 2012-10-01T09:35:06.780 に答える
5

従来のjQuery UI（バージョン1.7.3）では、単純に使用できました

$('.ui-dialog-buttonpane button')[0].disabled=true;

DOM要素自体のボタンを無効にするだけです。新しい jQuery UI (バージョン 1.8.7) にアップグレードしたため、そのメソッドは Firefox では機能しなくなりましたが、jquery UI ボタン​​固有の無効化および有効化関数をボタン jquery オブジェクトで呼び出すことができます。

$('.ui-dialog-buttonpane button').eq(0).button('disable');
于 2011-01-06T00:42:43.413 に答える
5

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');
    }
}

「最初の」ボタンは、一番右にあるボタンです。適切な視覚効果を得るために、ボタンを無効にし、ダイアログの無効クラスを設定します。

于 2009-12-13T13:08:41.587 に答える
4

似たようなことをしようとしている人に当てはまる可能性のある回避策を見つけました。ボタンを無効にする代わりに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");
            }
        }
    }
});

とにかく、それが誰かを助けることを願っています。

于 2009-02-23T23:51:01.090 に答える
4

このタスクを少し簡単にするために、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');

これが役立つことを願っています。

于 2010-10-14T19:33:16.177 に答える
4

本当にボタンを無効にしたい場合は、.unbind() メソッドも呼び出す必要があることがわかりました。そうしないと、ボタンがアクティブなままになり、ダブルクリックで複数のフォームが送信される可能性があります。次のコードは私にとってはうまくいきます：

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
于 2010-05-04T22:50:32.113 に答える
3

ドキュメントによると：

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);
于 2016-09-15T07:30:04.377 に答える
3

私はそれがすべてで動作するはずだと思います、

<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>
于 2010-06-17T18:18:21.713 に答える
3

Unfortunately no solutions from given here worked for several dialogs on the page.

Also the problem was that original dialog doesn't contain button pane in itself, but is a sibling of it.

So I came up with selecting by dialog ID like that:

        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' );
            },

...

and then the same getFirstDialogButton() function could be later used to enable button, e.g. after successful validation.

Hope it can help someone.

于 2011-03-12T12:21:52.840 に答える
3

記録のために、この投稿は私の問題を解決するのに役立ちました. つまり、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);
于 2009-09-26T11:06:38.623 に答える
3

ボタンを割り当てる配列メソッドを使用して実装した例を次に示します。これにより、後で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();

お役に立てれば。

于 2011-05-12T19:07:21.827 に答える
3

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');
于 2011-08-24T11:50:50.733 に答える
2

ダイアログボックスの[保存]ボタンを無効にするには、関数で次の行を使用します。

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

ボタンのテキストを変更するには、次の行を使用します（これにより、キャンセルボタンのテキストがClose Meに変更されます）

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
于 2011-06-29T09:55:11.907 に答える
1

jQueryの世界では、一連のDOM要素からオブジェクトを選択する場合は、eq（）を使用する必要があります。

例：

var button = $（'button'）。eq（1）;

また

var button = $（'button：eq（1）'）;

于 2010-10-29T08:33:32.000 に答える
1

@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");
    });

元のソース: http://jsfiddle.net/nick_craver/rxZPv/1/

于 2011-06-29T10:15:49.933 に答える
1

これは私のために仕事をしました：

$find("<%= btnPrint.ClientID %>").set_enabled(true);
于 2012-03-07T12:26:15.237 に答える
1

呼び出し.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);
于 2011-11-25T10:58:24.467 に答える
0

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"); } }
});
于 2014-09-25T19:06:59.607 に答える
0

誰かがボタンをクリックしたときのローディング アニメーションのようなものに置き換えようとしている場合 (たとえば、[送信] ボタンがダイアログでフォームを送信する場合)、ボタンを次のように画像に置き換えることができます。

...
buttons: {
    "Submit": function(evt) {
        $(evt.target).closest('button').replaceWith('<img src="loading.gif">');
    }
}

jQuery replaceWith ドキュメント

于 2013-12-09T23:41:01.860 に答える
0

I had one button I didn't want displayed till a trigger point.

At first I tried this which works: -

$(":button:contains('OK')").hide();

but leaves a line (because they have all gone!), so added this instead in my CSS: -

.ui-dialog .ui-dialog-buttonpane {
display: none;
}

This hides ALL the buttons.

I can re-enable when needed by : -

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button
于 2014-10-16T11:15:18.240 に答える