jQuery UIダイアログのボタンを無効にするにはどうすればよいですか?


143

jQuery UIダイアログのボタン無効にする方法を教えてください。上記のリンクにあるドキュメントでは、これを見つけることができないようです。

モーダル確認に2つのボタンがあります(「確認」と「キャンセル」)。「確認」ボタンを無効にしたい場合があります。


このスレッドでの回答を参照してください。stackoverflow.com/questions/577548/...
エリック

5
@Erik-これらの回答、つまり.button()プラグインのために状況が少し変わったので、それらは必ずしも最良の/最もクリーンなソリューションであるとは限りません。
Nick Craver

回答:


158

jQuery UIに含まれている.button()プラグイン/ウィジェットを含めている場合(完全なライブラリがあり、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()何か他の部分文字列にマッチすることを防ぎます。


ダイアログとボタンパンの間にすべての「サイズ変更可能な」divがあるため、next()は私には機能しません。私はnextAll()を使用し、ボタンからbuttonPanを区切るよう:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
マシュー

ボタンペインがダイアログコンテナの子ではないため、ページで複数のダイアログが定義されている場合、問題が発生する可能性があることに注意してください。
ブレット・ライアン

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");あなたが持っている機能からボタンを無効にしたい場合は、そのダイアログをウィジェット化し、その後ボタンを無効にする必要がありますが、優れたソリューションです。このように$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
メリディア

3
テキストで目的のボタンをクエリしたくない場合は、ボタンにクラスを与えることもできます。jQuery UIのダイアログは、ボタンオプションのオブジェクトを含む配列をサポートしています。各オブジェクトには、ボタンの属性に関する情報が含まれています。
デニス

これは私のために働きました:$(this).closest( "。ui-dialog")。find( "button:contains( 'Save')")。prop( "disabled"、true).addClass( "ui-state-無効");
Adrian P.

217

このリンクされた質問でさえ、だれでもこの解決策を提案したように見えます。

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

次に、他の場所で、jquery UIボタンのAPIを使用できるようにする必要があります。

$("#button-ok").button("disable");

15
+1。なぜこの回答がこれ以上の票を獲得しなかったのかはわかりません。それは私が遭遇した中で最もクリーンで、うまく動作します。
Doug Wilson

38
これはドキュメントにある必要があります...ボタンにIDを割り当てることができることさえ示していません。
Jay K

1
これは間違いなく最良の答えです。間違ったセレクターを使用してボタンを検索することでそれを行う他のソリューションがあります。ニコラ、よくできました!
jnoreiga 2012

4
同意:+)あなたも迅速に行うことができます:それは私がUIチームが...実装する必要が考えていたソリューションです{text:"ok",disabled:true,click: function(){}}
マシュー

10
これは素晴らしい!idが一意であることが心配な場合は、「id」の代わりに「class」を使用することもできます。あなたはボタンを検索するために、より多くのビットを入力する必要がありますけれども:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
desm

49

文書化されていないdisabled属性を使用することもできます。

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

ダイアログが開いた後に有効にするには、次を使用します:

$("#my-button-1").attr('disabled', false);

JsFiddle: http


文書化されていないわけではありません。ボタンが処理されると、オブジェクトのすべてのプロパティが、対応するjQueryプロパティに対して実行されます。たとえば、ボタンにattr: { 'data-value' : 'some value here' }属性data-valueを追加する場合に追加できます。
クラッシュ

2
もう文書化されていません。公式です。
Salman A

このソリューションは、一般的なバージョンよりもはるかにエレガントです。これにより、柔軟に定義されたセレクターの問題なしに、すべての柔軟性が得られます。
KimvdLinde 2015年

disabledボタンの作成時に属性を割り当てる必要があることに注意してください。
user1032531

反対票を投じようとしましたが、4時間前に反対票を投じましたが、できません。このソリューションは、正しく機能していないようです。
user1032531

7

以下は、ボタンのクリック機能内から機能します。

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}

グレー表示になる前にクリックする必要があります。
マット

1

ボタンはクラスによって識別されますui-button。ボタンを無効にするには:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

ダイアログを動的に作成する場合を除き(可能です)、ボタンの位置がわかります。したがって、最初のボタンを無効にするには:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

ui-state-disabledクラスは、素敵な淡色スタイルというボタンを与えるものです。


1

このタスクを少し簡単にするために、jQuery関数を作成しました。おそらく今より良い解決策があります...どちらにせよ、これが私の2セントです。:)

これをJSファイルに追加するだけです。

$.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;}
});};

クラス「ダイアログ」のダイアログで「OK」ボタンを無効にします。

$('.dialog').dialogButtons('Ok', 'disabled');

すべてのボタンを有効にします。

$('.dialog').dialogButtons('enabled');

「閉じる」ボタンを有効にし、色を変更します。

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

すべてのボタンのテキストが赤:

$('.dialog').dialogButtons().css('color','red');

お役に立てれば :)


1
function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}

1

ボタンの配列を上書きして、必要なものだけを残すことができます。

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

1

このコードは「YOUR_BUTTON_LABEL」でボタンを無効にします。contains()で名前を置き換えることができます。 無効にする

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

「YOUR_BUTTON_LABEL」をボタンのラベルに置き換えます。 有効にする

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

0

たとえば、これを実行して最初のボタンを無効にすることができます。

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

0

私のやり方は Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

これは私が見つけた最も短くて簡単な方法です。


0

ノックアウトを使用している場合、これはさらにクリーンになります。次のものがあるとします。

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

魔法はjQuery UIソースから来ています

$( "<button></button>", props )

基本的に、ボタンオブジェクトを介して渡すことで、任意のjQueryインスタンス関数を呼び出すことができます。

たとえば、HTMLを使用する場合:

{ html: '<span class="fa fa-user"></span>User' }

または、ボタンにクラスを追加する場合(これは複数の方法で行うことができます):

{ addClass: 'my-custom-button-class' }

たぶんあなたは気が狂っており、ホバリングしているときにボタンをdomから削除したいでしょう:

{ mouseover: function () { $(this).remove(); } }

このような無数のスレッドで誰もこれについて言及していないようで、本当に驚いています...


0

これは私のために働きました-

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 

0

ダイアログを作成するときにボタンを無効にすることができます。

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

または、ダイアログが作成された後はいつでも無効にできます:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.