Wie kann ich eine Schaltfläche in einem jQuery-UI-Dialogfeld deaktivieren?

Wie gehe ich über einen Button zu deaktivieren auf dem jQuery UI - Dialog . Ich kann dies anscheinend in keiner der Dokumentationen unter dem obigen Link finden.

Ich habe 2 Schaltflächen auf der Modalbestätigung ("Bestätigen" und "Abbrechen"). In bestimmten Fällen möchte ich die Schaltfläche "Bestätigen" deaktivieren.

Wenn Sie das .button()Plugin / Widget einschließen, das die jQuery-Benutzeroberfläche enthält (wenn Sie über die vollständige Bibliothek verfügen und über 1.8+ verfügen, verfügen Sie über diese), können Sie damit die Schaltfläche deaktivieren und den Status visuell aktualisieren:

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

Sie können es hier ausprobieren ... oder wenn Sie eine ältere Version verwenden oder das Schaltflächen-Widget nicht verwenden, können Sie es folgendermaßen deaktivieren:

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

Wenn Sie es in einem bestimmten Dialogfeld möchten, z. B. nach ID, gehen Sie folgendermaßen vor:

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

In anderen Fällen, in denen :contains()möglicherweise falsch positive Ergebnisse erzielt werden, können Sie .filter()diese verwenden, aber hier ist es übertrieben, da Sie Ihre beiden Schaltflächen kennen. Wenn dies in anderen Situationen der Fall ist, würde es so aussehen:

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

Dies würde verhindern :contains(), dass ein Teilstring von etwas anderem übereinstimmt.

Es sieht so aus, als hätte jemand, selbst in dieser verknüpften Frage , diese Lösung vorgeschlagen, ähnlich dem ersten Teil der Antwort von Nick Craver:

$("#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");
            }
        }
    ]
});

Dann sollten Sie an anderer Stelle in der Lage sein, die API für die Schaltfläche jquery UI zu verwenden:

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

Sie können auch das nicht jetzt dokumentierte disabledAttribut verwenden:

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

    }]
});

Verwenden Sie zum Aktivieren nach dem Öffnen des Dialogfelds:

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

JsFiddle: http://jsfiddle.net/xvt96e1p/4/

Folgendes funktioniert innerhalb der Schaltflächenklickfunktion:

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

Eine Schaltfläche wird von der Klasse identifiziert ui-button. So deaktivieren Sie eine Schaltfläche:

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

Sofern Sie den Dialog nicht dynamisch erstellen (was möglich ist), kennen Sie die Position der Schaltfläche. So deaktivieren Sie die erste Schaltfläche:

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

Die ui-state-disabledKlasse verleiht einem Knopf einen schönen, gedimmten Stil.

Ich habe eine jQuery-Funktion erstellt, um diese Aufgabe etwas zu vereinfachen. Wahrscheinlich gibt es jetzt eine bessere Lösung ... so oder so, hier sind meine 2 Cent. :) :)

Fügen Sie dies einfach Ihrer JS-Datei hinzu:

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

Deaktivieren Sie die Schaltfläche 'Ok' im Dialog mit der Klasse 'Dialog':

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

Alle Schaltflächen aktivieren:

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

Aktivieren Sie die Schaltfläche "Schließen" und ändern Sie die Farbe:

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

Text auf allen Schaltflächen rot:

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

Hoffe das hilft :)

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

Sie können das Schaltflächenarray überschreiben und nur die benötigten übrig lassen.

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

Dieser Code deaktiviert die Schaltfläche mit 'YOUR_BUTTON_LABEL'. Sie können den Namen in enthält () ersetzen. Etwas deaktivieren

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

Ersetzen Sie 'YOUR_BUTTON_LABEL' durch die Beschriftung Ihrer Schaltfläche. ermöglichen

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

Sie können dies tun, um die erste Schaltfläche zu deaktivieren, zum Beispiel:

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

So wie ich es mache ist Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Dies ist der kürzeste und einfachste Weg, den ich gefunden habe.

Wenn Sie Knockout verwenden, ist dies sogar noch sauberer. Stellen Sie sich vor, Sie haben Folgendes:

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>

Die Magie kommt von der jQuery-UI-Quelle :

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

Sie können grundsätzlich JEDE jQuery-Instanzfunktion aufrufen, indem Sie sie über das Schaltflächenobjekt übergeben.

Wenn Sie beispielsweise HTML verwenden möchten:

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

Oder wenn Sie der Schaltfläche eine Klasse hinzufügen möchten (Sie können dies auf mehrere Arten tun):

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

Vielleicht bist du verrückt und möchtest den Knopf aus dem Dom entfernen, wenn er schwebt:

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

Ich bin wirklich überrascht, dass niemand dies in den unzähligen Threads wie diesem erwähnt zu haben scheint ...

Das hat bei mir funktioniert -

$("#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" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 

Sie können eine Schaltfläche deaktivieren, wenn Sie den Dialog erstellen:

$(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>

Oder Sie können es jederzeit deaktivieren, nachdem der Dialog erstellt wurde:

$(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>