wake-up-neo.com

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

Wie deaktiviere ich eine Schaltfläche im jQuery-Dialogfeld . Ich kann das anscheinend in keiner der Dokumentationen im obigen Link finden.

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

141
leora

Wenn Sie das .button() Plugin/Widget einbinden, das die jQuery-Benutzeroberfläche enthält (wenn Sie die vollständige Bibliothek haben und mit 1.8+ arbeiten, haben Sie sie), können Sie es verwenden, um Deaktivieren Sie die Schaltfläche und aktualisieren Sie den Status visuell wie folgt:

$(".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 möchten, dass es sich in einem bestimmten Dialogfeld befindet, beispielsweise nach ID, dann gehen Sie wie folgt vor:

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

In anderen Fällen, in denen :contains() möglicherweise falsch positive Ergebnisse liefert, können Sie .filter() wie folgt verwenden, aber es ist hier übertrieben, da Sie wissen Ihre beiden Tasten. Wenn das 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, dass :contains() mit einer Teilzeichenfolge von etwas anderem übereinstimmt.

156
Nick Craver

Sieht so aus, als hätte jemand, auch in diese verknüpfte 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");
            }
        }
    ]
});

An anderer Stelle sollte es dann möglich sein, das API für die Schaltfläche jquery UI zu verwenden:

$("#button-ok").button("disable");
206
Nicola Tuveri

Sie können auch die nicht jetzt dokumentiertes disabled Attribut:

$("#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 Folgendes:

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

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

48
Jérôme

Folgendes funktioniert über die Schaltflächen-Klickfunktion:

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

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 zu 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 Knöpfen rot:

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

Hoffe das hilft :)

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

Sie können das Tastenfeld überschreiben und nur die benötigten belassen.

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

Eine Schaltfläche ist durch die Klasse 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);

Das ui-state-disabled Klasse ist das, was eine Schaltfläche gibt, die schön abgeblendet ist.

1
Chris Laplante

dieser Code deaktiviert die Schaltfläche mit "YOUR_BUTTON_LABEL". Sie können den Namen in contain () ersetzen. zu deaktivieren

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

ersetzen Sie "YOUR_BUTTON_LABEL" durch die Beschriftung Ihrer Schaltfläche. zum aktivieren

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

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 aus der Quelle jQuery UI :

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

Grundsätzlich können Sie 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 sind Sie verrückt, und Sie möchten den Knopf aus dem Dom entfernen, wenn Sie den Mauszeiger darüber halten:

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

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

0
crush

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

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.

0
Bhavin

Sie können eine Schaltfläche deaktivieren, wenn Sie das Dialogfeld 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>
0
Salman A

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

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