webentwicklung-frage-antwort-db.com.de

Wie kann ich eine Schaltfläche in einem jQuery-Dialogfeld für 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 "Fortfahren" erst aktiviert wird, wenn alle Felder Inhalt enthalten. Andernfalls bleibt sie deaktiviert.

Ich habe eine Funktion geschrieben, die jedes Mal aufgerufen wird, wenn sich der Feldstatus geändert hat. Ich weiß jedoch nicht, wie ich die Dialogschaltfläche in dieser 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');
      }
    }
  })
});
236
Draco

Sie möchten die deaktivierte Eigenschaft setzen

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

Update : Ahha, ich sehe jetzt die Komplexität. Das jQuery-Dialogfeld 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 die gewünschte zu finden, und dann das deaktivierte Attribut wie oben gezeigt festlegen.

258
Tom Ritter

Es ist sehr einfach:

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

Sie sind damit beschäftigt, eine einfache Aufgabe zu komplizieren. Das Dialogfeld "jQueryUI" bietet zwei Möglichkeiten zum Festlegen von Schaltflächen aus einem bestimmten Grund.

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

Das folgende Beispiel deaktiviert eine Schaltfläche und aktualisiert ihren Status ordnungsgemäß, indem alle jQueryUI-CSS-Klassen und -Attribute angewendet werden.

Schritt 1 - Erstellen Sie Ihren Dialog mit einer Array Anzahl von 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 das Dialogfeld 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);
38
Ido Sela

Wenn Sie einen Dialog erstellen, der IDs für die Schaltflächen bereitstellt,

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

Ich wollte in der Lage sein, die Schaltfläche nach Namen zu suchen (da ich mehrere Schaltflächen in meinem Dialogfeld der jQuery-Benutzeroberfläche habe). Ich habe auch mehrere Dialogfelder 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' );
}
29
Nick

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.

19
Rainer Blessing

Hier ist das Beispiel aus der Frage, das 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');
            }
        }
    });
}

Außerdem ist die folgende Frage hilfreich: Wie kann ich eine Schaltfläche in einem Dialogfeld der jQuery-Benutzeroberfläche deaktivieren?

11

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

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

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.

8
Hugh Turner

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 einzureichen. Es macht mich verrückt, wenn die Schaltfläche, auf die ich klicken möchte, deaktiviert ist und es keinen Hinweis darauf gibt, warum.

8
erikkallen

Versuche dies:

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

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. In der Regel empfiehlt es sich, eine ID für den Zugriff hinzuzufügen

5
haohaolee

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

Die "erste" Taste ist die am weitesten rechts liegende. Sie deaktivieren beide die Schaltfläche und legen die deaktivierte Klasse des Dialogfelds fest, um den richtigen visuellen Effekt zu erzielen.

5

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

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

um nur die Schaltfläche auf dem DOM-Element selbst zu deaktivieren. Nachdem wir auf die neuere jQuery-Benutzeroberfläche (Version 1.8.7) umgestellt haben, funktioniert diese Methode in Firefox nicht mehr, aber ich kann einfach die spezifischen Funktionen zum Deaktivieren und Aktivieren der jquery-Benutzeroberfläche für die button-jquery-Objekte aufrufen:

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

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

Ist dies nicht der Fall, wird eine einfache Meldung angezeigt, die besagt, dass das Kontrollkästchen vor dem Absenden aktiviert werden muss.

Zum Beispiel:

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

Wie auch immer, ich hoffe das hilft jemandem.

4
Chris

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');
4
postrational

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

4
sergiodlopes

Ich habe eine Funktion erstellt, die der von Nick ähnelt, aber für meine Methode ist das Festlegen der dialogClass nicht erforderlich, und Sie können die Schaltflächen eines bestimmten Dialogfelds über die ID abrufen (wenn in Ihrer Anwendung mehrere vorhanden sind).

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

Also, wenn Sie den Dialog so 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');
3
Shao

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

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

So sieht der gesamte Code aus. Außerdem habe ich 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);
3
Jorge

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

Hier ist ein Beispiel, das ich gerade mithilfe der Array-Methode zum Zuweisen von Schaltflächen implementiert habe. Dadurch kann ich später - wie in der ursprünglich akzeptierten Antwort angegeben - ID-Selektoren verwenden, 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.

3
Jeremiah Ware

Leider haben hier keine Lösungen für mehrere Dialoge auf der Seite funktioniert.

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

Also kam ich mit der Auswahl von Dialog-ID wie folgt:

        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 die gleiche Funktion getFirstDialogButton () später verwendet werden, um die Schaltfläche zu aktivieren, z. nach erfolgreicher Validierung.

Hoffe es kann jemandem helfen.

3
Timur Evdokimov

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 Abbrechen in Schließen).

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

Das Aufrufen von .attr("disabled", true) funktioniert natürlich, aber wenn Sie jQuery verwenden, möchten Sie es auf eine "zuckersüße" Art und Weise tun. Deshalb 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 die Funktionen enable() und disable(), damit Sie Ihre Arbeit so erledigen können:

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

Welches ist das gleiche wie

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

und

$('#continueButton').enable(false);
1
Danubian Sailor

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

1
diewland

Nach der 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 werden soll.

// 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 so aussehen:

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

Das hat den Job für mich gemacht:

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

@Chris Sie können die folgenden Codezeilen verwenden, um die Dialogschaltflächen zu aktivieren/deaktivieren, bis das 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");
    });

Ursprüngliche Quelle: http://jsfiddle.net/nick_craver/rxZPv/1/

1
Chanaka

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

jQuery Solution funktioniert bei mir.

$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);
0
jalalBK

Wenn jemand eine Schaltfläche durch eine Ladeanimation ersetzen möchte, wenn er darauf klickt (z. B. wenn eine Schaltfläche "Senden" das Formular im Dialogfeld sendet), können Sie die Schaltfläche folgendermaßen durch Ihr Bild ersetzen:

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

jQuery replaceWith docs

0
Robbie Averill

Ich hatte eine Schaltfläche, die ich erst an einem Triggerpunkt anzeigen lassen wollte.

Zuerst habe ich versucht, was funktioniert:

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

lässt aber eine Zeile (weil sie alle weg sind!), so fügte dies stattdessen in meinem CSS hinzu: -

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

Dadurch werden ALLE Schaltflächen ausgeblendet.

Ich kann es bei Bedarf wieder aktivieren, indem ich:

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button
0
Mikeys4u