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

143

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.

Leora
quelle
Siehe die Antworten in diesem Thread: stackoverflow.com/questions/577548/…
Erik
5
@Erik - Die Situation hat sich seit diesen Antworten ein wenig geändert, und zwar aufgrund des .button()Plugins, sodass sie nicht mehr unbedingt die besten / saubersten Lösungen sind.
Nick Craver

Antworten:

158

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.

Nick Craver
quelle
next () funktioniert bei mir nicht, da sich zwischen dem Dialogfeld und dem Buttonpan alle "Größenänderungen" befinden. Also habe ich nextAll () verwendet und den buttonPan vom button getrennt:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu
Beachten Sie, dass Probleme auftreten können, wenn Ihre Seite mehrere Dialoge definiert, da der Schaltflächenbereich kein untergeordnetes Element des Dialogcontainers ist.
Brett Ryan
Hervorragende Lösung, $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");obwohl Sie, wenn Sie die Schaltfläche für eine Funktion deaktivieren möchten, die Sie dafür haben, diesen Dialog Widgetisieren und die Schaltfläche danach deaktivieren müssen; so$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
Meridius
3
Beachten Sie, dass Sie der Schaltfläche auch eine Klasse zuweisen können, wenn Sie die gewünschte Schaltfläche nicht nach ihrem Text abfragen möchten. Das Dialogfeld der jQuery-Benutzeroberfläche unterstützt ein Array mit Objekten für die Schaltflächenoption, wobei jedes Objekt Informationen zu den Schaltflächenattributen enthält.
Dennis
Dies funktionierte für mich: $ (this) .closest (". UI-dialog"). Find ("button: enthält ('Save')"). Prop ("disabled", true) .addClass ("ui-state-" behindert");
Adrian P.
217

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");
Nicola Tuveri
quelle
15
+1. Ich bin mir nicht sicher, warum diese Antwort nicht mehr Stimmen erhalten hat. Es ist das sauberste, das mir begegnet ist und funktioniert gut.
Doug Wilson
38
Dies muss in den Dokumenten enthalten sein. Es wird nicht einmal angezeigt, dass Sie Schaltflächen eine ID zuweisen können.
Jay K
1
Dies ist ohne Zweifel die beste Antwort. Es gibt andere Lösungen, die dies tun, indem sie mit falschen Selektoren nach der Schaltfläche suchen. Gute Arbeit Nicola!
jnoreiga
4
Zustimmen: Es ist DIE Lösung, von der ich dachte, dass das UI-Team sie implementieren sollte ...: +) Sie können es noch schneller tun:{text:"ok",disabled:true,click: function(){}}
Matthieu
10
Das ist toll! Sie können auch "Klasse" anstelle von "ID" verwenden, wenn Sie befürchten, dass die ID eindeutig ist. Sie müssen jedoch etwas mehr $("#dialog").dialog("widget").find(".button-ok-class").button("enable")
eingeben
49

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/

Jérôme
quelle
Es ist nicht so, dass es nicht dokumentiert ist. Wenn die Schaltflächen verarbeitet werden, werden alle Eigenschaften des Objekts anhand ihrer jQuery-Eigenschaftsäquivalente ausgeführt. Sie können beispielsweise hinzufügen, attr: { 'data-value' : 'some value here' }ob Sie das Attribut data-valuezur Schaltfläche hinzufügen möchten.
Crush
2
Nicht mehr undokumentiert. Es ist offiziell.
Salman A
Diese Lösung ist viel eleganter als die populärere Version. Dies ermöglicht Ihnen die gesamte Flexibilität ohne das Problem vage definierter Selektoren.
KimvdLinde
Beachten Sie, dass das disabledAttribut beim Erstellen der Schaltflächen zugewiesen werden muss.
user1032531
Ich habe versucht, abzustimmen, aber ich habe vor 4 Stunden abgestimmt und kann das nicht. Diese Lösung scheint nicht mehr richtig zu funktionieren.
user1032531
7

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');
            }
        }
    });
}
Chris Pietschmann
quelle
aber dann müssen Sie klicken, bevor es ausgegraut ist.
Matt
1

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.

Chris Laplante
quelle
1

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 :)

Sergiodlopes
quelle
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' );
    }
}
Ronny Sherer
quelle
1

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"); }
}] );
jfredys
quelle
1

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");
Sumeet_Pol
quelle
0

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

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

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.

Bhavin
quelle
0

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 ...

zerquetschen
quelle
0

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" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 
Pramod Kumar
quelle
0

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>

Salman A.
quelle