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

237

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');
      }
    }
  })
});
Draco
quelle
Es gibt eine gute Antwort unter: stackoverflow.com/questions/3646408/…
Amir
3
Ich habe dies ziemlich gründlich

Antworten:

260

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.

Tom Ritter
quelle
Leider macht es der JQuery-Dialog nicht allzu einfach, also müssen Sie ein wenig daran arbeiten.
Tom Ritter
Ja, aber die Schaltflächenoption gibt keine DOM-Elemente zurück, sondern Funktionen - das Durchlaufen dieser Elemente ist in Ordnung, aber das Deaktivieren eines Elements ist nicht so einfach. Vermisse ich hier etwas?
Remi Despres-Smyth
1
Sie müssen diese Methode umgehen, um die Schaltflächen zu deaktivieren. Verwenden Sie jQuery-foo, um die resultierenden dom-Elemente von der Seite zu entfernen.
Stefan Kendall
36
Einverstanden - warum ist dies die ausgewählte Antwort? -1 für unvollständig.
Remi Despres-Smyth
22
Ich glaube, .prop('disabled', true)wird in jQuery 1.6+
Molomby
191

Es ist sehr einfach:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
Raman
quelle
4
Ich mag diese Lösung, aber sie sollte wirklich lauten: $ (": button: enthält ('Authentifizieren')"). Attr ("deaktiviert", "deaktiviert"). AddClass ('ui-state-disabled'); (die addClass fehlte)
Eric Asberry
4
Wenn es mehrere Dialoge gibt, müssen Sie definieren, welchen Dialog Sie ändern müssen: $ ("# dialogId"). Parent (). $ (": Button: enthält ('Authenticate')"). Attr ("disabled", " disabled "). addClass ('ui-state-disabled');
Podeig
5
+1: Dies ist bei weitem die beste Antwort ... Die akzeptierte Antwort beantwortet nichts, schlägt nur einen imperativen Ansatz vor - was übrigens umständlich ist: Wir müssen nichts durchlaufen, jquery kann das für uns tun.
Rsenna
1
Ich fand, dass dies auch funktioniert, da die Schaltflächen im jQueryUI-Dialogfeld jQueryUI-Schaltflächen sind: $ ("# dialogID"). Parent (). Find (": button: enthält ('Authenticate')"). Button ("disable") ;;
schreibt
12
Ich glaube, .prop('disabled', true)wird in jQuery 1.6+
Molomby
38

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);
Ido Sela
quelle
2
Richtige Idee, aber die eachSchleife ist unnötig. Geben Sie ein classAttribut im buttonsArray an, und Sie können dieses verwenden, um das richtige Element zu finden.
CDMckay
Wie cdmackay sagte, müssen Sie nicht schleifen. In Ihrem obigen Beispiel können Sie einfach einen jQuery-Selektor verwenden: var $ doneButton = $ ("# done");
Rob
Wenn ich versuche, die Schaltflächen mit der oben beschriebenen Methode (Array-Methode) zu erstellen, werden die Schaltflächen als "1" und "0" und nicht als "Fertig" und "Abbrechen" angezeigt. Warum passiert dies? Der Text wird in der Schaltfläche nicht angezeigt und die Klickfunktion wird auch nicht ausgelöst.
Harke
1
Das funktioniert bei mir und du brauchst die Schleife nicht. Legen Sie die ID fest und greifen Sie auf das Element zu: this.myDialog.dialog ("Option", "Schaltflächen", [{ID: "addAdapterFormOkButton", Text: "OK", klicken Sie auf: function () {}}]) Dann brauchen Sie nur noch um mit dem Selektor darauf zuzugreifen, wie alle oben sagen: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ('ui-state-disabled'); okButt.attr ('disabled', true);
Gurnard
32

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);
vitalnik
quelle
7
Ich habe dir +1 gegeben, aber ich denke, es ist besser, die Methode anstelle der Eigenschaft der Schaltfläche zu verwenden, wie: $ ("# dialogSave"). button ("disable");
Fareed Alnamrouti
1
Ha! Mit Abstand am einfachsten! Aber verwenden Sie die Methode wie angegeben.
Papillon
29

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' );
}
Nick
quelle
Schöne Lösung. In der Lösung würde ich jedoch erwähnen, dass der Schaltflächenbereich kein untergeordnetes Element des Dialogfelds ist. Der Schlüssel legt eine eindeutige dialogClass fest und verwendet sie für die Auswahl. Das hat mich erwischt, als ich es mir angesehen habe.
Remi Despres-Smyth
Interessant, dass der Text der Schaltfläche durch die Taste des Schaltflächenobjekts festgelegt wird. Scheint darauf beschränkt zu sein, wenn Sie das Attribut nicht festlegen müssen. Andernfalls ist die Array-Version besser, bei der der Text explizit pro Schaltfläche festgelegt wird.
Gerard ONeill
19

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.

Rainer Segen
quelle
11

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?

Chris Pietschmann
quelle
9

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.

Hugh Turner
quelle
9

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);
Guillaume Aversa
quelle
8

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.

erikkallen
quelle
6

Versuche dies:

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

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.

Remi Despres-Smyth
quelle
Dies setzt voraus, dass Sie nur einen Dialog auf der Seite haben. Ich habe seitdem eine Funktion geschrieben, um eine beliebige Schaltfläche mit Namen aus einem beliebigen Dialogfeld auf der Seite abzurufen, um dies zu behandeln.
Remi Despres-Smyth
5

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');
Matt Palmerlee
quelle
5

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

haohaolee
quelle
1
Ich denke nicht, dass das funktionieren wird. Die Schaltfläche wird nur deaktiviert, wenn auf die Schaltfläche OK geklickt wird.
Jean-François Beauchamp
Ich musste eine OK-Schaltfläche in einem Dialogfeld deaktivieren, bis die Verarbeitung abgeschlossen war. Das hat perfekt funktioniert.
CodingYoshi
4

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

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.

Peter Mortensen
quelle
4

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.

Sergiodlopes
quelle
3

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.

Timur Evdokimov
quelle
3

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.

Jeremiah Ware
quelle
3

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');
Shao
quelle
3

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);
Peter Mortensen
quelle
3

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>
Peter Mortensen
quelle
2

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");
Chanaka
quelle
1

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

Chanaka
quelle
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);
Donau-Seemann
quelle
1

Das hat den Job für mich gemacht:

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

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

diewland
quelle
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);
PaN1C_Showt1Me
quelle
0

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

Robbie Averill
quelle
0

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