Wie kann ich eine Schaltfläche in einem jQuery-Dialogfeld über eine Funktion deaktivieren?

Ich habe ein jQuery-Dialogfeld, in dem der Benutzer bestimmte Informationen eingeben muss. In diesem Formular habe ich einen "Weiter" -Button. Ich möchte, dass diese Schaltfläche "Weiter" erst aktiviert wird, wenn alle Felder Inhalt enthalten. Andernfalls bleibt sie deaktiviert.

Ich habe eine Funktion geschrieben, die jedes Mal aufgerufen wird, wenn sich ein Feldstatus geändert hat. Ich weiß jedoch nicht, wie ich die Dialogschaltfläche über diese Funktion aktivieren und deaktivieren kann. Was soll ich machen?

Hoppla und ich haben vergessen zu erwähnen, dass diese Schaltflächen wie folgt erstellt wurden:

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

Sie möchten die deaktivierte Eigenschaft festlegen

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

Update : Ahha, ich sehe jetzt die Komplexität. Der jQuery-Dialog hatte eine einzelne Zeile, die von Nutzen sein wird (unter dem Abschnitt "Schaltflächen").

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

Sie müssen die Schaltflächensammlung aus dem Dialogfeld abrufen, diese durchlaufen, um herauszufinden, welche Sie benötigen, und dann das deaktivierte Attribut wie oben gezeigt festlegen.

Es ist sehr einfach:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

Sie sind damit fertig, eine einfache Aufgabe zu komplizieren. Das jQueryUI-Dialogfeld bietet zwei Möglichkeiten, Schaltflächen aus einem bestimmten Grund festzulegen.

Wenn Sie nur den Klick-Handler für jede Schaltfläche festlegen müssen, verwenden Sie die Option, die ein ObjectArgument akzeptiert. Verwenden Sie zum Deaktivieren von Schaltflächen und zum Bereitstellen anderer Attribute die Option, die ein ArrayArgument akzeptiert.

Im folgenden Beispiel wird eine Schaltfläche deaktiviert und ihr Status wird korrekt aktualisiert, indem alle jQueryUI-CSS-Klassen und -Attribute angewendet werden.

Schritt 1 - Erstellen Sie Ihren Dialog mit einer Arrayder Schaltflächen:

// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
    {
        id: "done"
        text: "Done",
        click: function() { ... }
    },
    {
        id: "cancel"
        text: "Cancel",
        click: function() { ... }
    }
] });

Schritt 2 - Aktivieren / Deaktivieren Sie die Schaltfläche Fertig, nachdem der Dialog erstellt wurde:

// 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);

Wenn Sie ein Dialogfeld mit IDs für die Schaltflächen erstellen,

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

Wir können die Schaltfläche mit dem folgenden Code deaktivieren:

$("#dialogSave").button("option", "disabled", true);

Ich wollte die Schaltfläche nach Namen suchen können (da ich in meinem jQuery-UI-Dialogfeld mehrere Schaltflächen habe). Ich habe auch mehrere Dialoge auf der Seite, daher brauche ich eine Möglichkeit, die Schaltflächen eines bestimmten Dialogfelds abzurufen. Hier ist meine Funktion:

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

Dies deaktiviert eine Schaltfläche:

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

Sie müssen die Dialog-ID hinzufügen, wenn Sie mehrere Dialoge auf einer Seite haben.

Hier ist das Beispiel aus der Frage, die geändert wurde, um die Schaltfläche nach dem Klicken zu deaktivieren:

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

Die folgende Frage ist auch hilfreich: Wie kann ich eine Schaltfläche in einem jQuery-UI-Dialogfeld deaktivieren?

Ich habe eine einfache Möglichkeit gefunden, eine Dialogschaltfläche zu deaktivieren (oder eine andere Aktion auszuführen).

    var dialog_selector = "#myDialogId";

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

Sie wählen einfach das übergeordnete Element Ihres Dialogfelds aus und finden alle Schaltflächen. Wenn Sie dann den Text Ihrer Schaltfläche überprüfen, können Sie Ihre Schaltflächen identifizieren.

Ich habe dies mit der Methode arbeiten lassen, .dialog("widget")die den Dialog DIV selbst zurückgibt. Wenn Sie in den Dialogmethoden sind:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

Aus Sicht der Benutzerfreundlichkeit ist es normalerweise besser, die Schaltfläche aktiviert zu lassen, aber eine Fehlermeldung anzuzeigen, wenn jemand versucht, ein unvollständiges Formular zu senden. Es macht mich verrückt, wenn die Schaltfläche, auf die ich klicken möchte, deaktiviert ist und es keinen Hinweis darauf gibt, warum.

Versuche dies:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

Hier ist meine enableOk-Funktion für einen jQuery-Dialog:

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

Der "erste" Knopf befindet sich am weitesten rechts. Sie deaktivieren beide die Schaltfläche und legen die deaktivierte Klasse des Dialogfelds fest, um den richtigen visuellen Effekt zu erzielen.

In der alten jQuery-Benutzeroberfläche (Version 1.7.3) konnte ich einfach verwenden

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

um einfach die Schaltfläche am DOM-Element selbst zu deaktivieren. Nachdem wir auf die neuere jQuery-Benutzeroberfläche (Version 1.8.7) aktualisiert haben, funktioniert diese Methode in Firefox nicht mehr. Ich kann jedoch einfach die Schaltfläche zum Deaktivieren und Aktivieren der Funktionen für die Schaltflächen-jquery-Objekte aufrufen.

$('.ui-dialog-buttonpane button').eq(0).button('disable');

haha, habe gerade eine interessante Methode gefunden, um auf die Bottons zuzugreifen

$("#dialog").dialog({

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

      }
 });

Es scheint, dass Sie alle nicht wissen, dass die Argumente ein Ereignisobjekt enthalten ...

Übrigens greift es nur über den Rückruf auf die Schaltfläche zu. Im Allgemeinen ist es gut, eine ID für den Zugriff hinzuzufügen

Wenn Sie eine Schaltfläche wirklich deaktivieren möchten, müssen Sie auch die Methode .unbind () aufrufen. Andernfalls ist die Schaltfläche möglicherweise noch aktiv und ein Doppelklick kann zu mehreren Formularübermittlungen führen. Der folgende Code funktioniert für mich:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

Ich habe eine Problemumgehung gefunden, die möglicherweise für Personen gilt, die versuchen, etwas Ähnliches zu tun. Anstatt die Schaltfläche zu deaktivieren, habe ich eine einfache ifAnweisung in die Funktion eingefügt, um zu überprüfen, ob das Kontrollkästchen aktiviert wurde.

Wenn dies nicht der Fall war, wurde eine einfache Meldung angezeigt, dass das Kontrollkästchen vor der Übermittlung aktiviert werden musste.

Beispielsweise:

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

Jedenfalls hoffe ich, dass das jemandem hilft.

Ich habe eine jQuery-Funktion erstellt, um diese Aufgabe etwas zu vereinfachen. Fügen Sie dies einfach Ihrer JavaScript-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');

Ich hoffe das hilft.

Leider funktionierten keine Lösungen von hier für mehrere Dialoge auf der Seite.

Das Problem war auch, dass das ursprüngliche Dialogfeld keinen Schaltflächenbereich an sich enthält, sondern ein Geschwister davon ist.

Also habe ich mir folgende Auswahl per Dialog-ID ausgedacht:

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

...

und dann könnte dieselbe Funktion getFirstDialogButton () später verwendet werden, um die Schaltfläche zu aktivieren, z. B. nach erfolgreicher Validierung.

Hoffe es kann jemandem helfen.

Hier ist ein Beispiel, das ich gerade mithilfe der Array-Methode zum Zuweisen von Schaltflächen implementiert habe, mit der ich später - genau wie in der ursprünglich angegebenen Antwort angegeben - ID-Selektoren verwenden kann, um Schaltflächen zu aktivieren / deaktivieren und sie sogar vollständig so anzuzeigen / auszublenden, wie ich bin tun.

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

Nach erfolgreicher Übermittlung deaktiviere und verstecke ich zwei der Schaltflächen und aktiviere die OK-Schaltfläche, die standardmäßig deaktiviert war.

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

Hoffe das hilft.

Ich habe eine ähnliche Funktion wie Nick erstellt, aber für meine Methode muss die dialogClass nicht festgelegt werden, und Sie können die Schaltflächen eines bestimmten Dialogfelds über die ID abrufen (falls in Ihrer Anwendung mehr als eine vorhanden ist).

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

Wenn Sie den Dialog also wie folgt erstellt haben:

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

Sie können die Schaltflächen folgendermaßen abrufen:

var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn           = getDialogButton('myDialogBox','Cancel');

Etwas deaktivieren:

addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');

Ermöglichen:

addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');

Nur zur Veranschaulichung, dieser Beitrag hat mir geholfen, mein Problem zu lösen. In kurzen Worten, Sie müssen das Attribut disabled auf disabled und nicht auf false setzen:

_send_button.attr('disabled','disabled');

So sieht der gesamte Code aus. Ich habe auch einige Stile hinzugefügt, damit er deaktiviert aussieht:

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

Ich denke, es sollte mit allen funktionieren,

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

Um die Schaltfläche Speichern in meinem Dialogfeld zu deaktivieren, verwenden Sie die folgende Zeile in Ihrer Funktion.

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

Um einen Text in einer Schaltfläche zu ändern, verwenden Sie die folgende Zeile (dies ändert den Text der Schaltfläche zum Abbrechen in Schließen).

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

@Chris Sie können die folgenden Codezeilen verwenden, um Dialogschaltflächen zu aktivieren / deaktivieren, bis Ihr Kontrollkästchen aktiviert / deaktiviert ist

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

Originalquelle: http://jsfiddle.net/nick_craver/rxZPv/1/

Das Aufrufen .attr("disabled", true)funktioniert natürlich, aber wenn Sie jQuery verwenden, möchten Sie es auf eine Art "Zucker" machen, also habe ich eine einfache Erweiterung geschrieben:

(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 );

Jetzt haben Sie Funktionen enable()und disable()können Ihre Arbeit folgendermaßen erledigen:

$('#continueButton').disable();

Welches ist das gleiche wie

$('#continueButton').disable(true);

und

$('#continueButton').enable(false);

Das hat den Job für mich gemacht:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

Wenn Sie in der jQuery-Welt ein Objekt aus einer Reihe von DOM-Elementen auswählen möchten, sollten Sie eq () verwenden. .

Beispiele:

var button = $ ('button'). Gleichung (1);

oder

var button = $ ('button: eq (1)');

Laut Dokumentation :

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

Um die Schaltfläche einfach auswählen zu können, können Sie der Schaltfläche eine eigene CSS-Klasse hinzufügen, die aktiviert / deaktiviert sein sollte.

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

Dann würde das Aktivieren / Deaktivieren folgendermaßen aussehen:

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);

Wenn jemand beim Klicken eine Schaltfläche durch eine Ladeanimation ersetzen möchte (z. B. wenn eine Schaltfläche "Senden" das Formular im Dialogfeld sendet), können Sie die Schaltfläche wie folgt durch Ihr Bild ersetzen:

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

jQuery replaceWith docs

So deaktivieren Sie eine Schaltfläche beim Öffnen des Dialogfelds:

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