Come posso disabilitare un pulsante in una finestra di dialogo dell'interfaccia utente di jQuery?


143

Come posso disabilitare un pulsante nella finestra di dialogo dell'interfaccia utente di jQuery . Non riesco a trovarlo in nessuno dei documenti nel link sopra.

Ho 2 pulsanti sulla conferma modale ("Conferma" e "Annulla"). In alcuni casi, desidero disabilitare il pulsante "Conferma".


Vedi le risposte in questa discussione: stackoverflow.com/questions/577548/…
Erik

5
@Erik - La situazione è leggermente cambiata da quelle risposte, in particolare a causa del .button()plugin, quindi non sono più necessariamente le soluzioni migliori / più pulite.
Nick Craver

Risposte:


158

Se stai includendo il .button()plug-in / widget che contiene l'interfaccia utente di jQuery (se hai la libreria completa e sei su 1.8+, ce l'hai), puoi usarla per disabilitare il pulsante e aggiornare visivamente lo stato, in questo modo:

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

Puoi provarlo qui ... o se sei su una versione precedente o non stai utilizzando il widget pulsante, puoi disabilitarlo in questo modo:

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

Se lo vuoi all'interno di una finestra di dialogo specifica, dì per ID, quindi fai questo:

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

In altri casi in cui :contains()potresti dare falsi positivi, puoi usarlo in .filter()questo modo, ma è eccessivo qui perché conosci i tuoi due pulsanti. Se questo è il caso in altre situazioni, sarebbe simile a questo:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

Ciò impedirebbe :contains()di abbinare una sottostringa di qualcos'altro.


next () non funzionerà per me, dato che c'è tutto il div "ridimensionabile" tra la finestra di dialogo e la pulsantiera. Quindi ho usato nextAll () e ho separato buttonPan dal pulsante:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu

Si noti che a causa del riquadro dei pulsanti che non è figlio della finestra di dialogo, potrebbero verificarsi problemi se la pagina definisce più finestre di dialogo.
Brett Ryan,

Ottima soluzione $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");anche se se si desidera disabilitare il pulsante da una funzione che si ha per esso, è necessario widget di quella finestra di dialogo e disabilitare il pulsante dopo; in questo modo$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
Meridio

3
Nota che se non vuoi interrogare il pulsante desiderato con il suo testo, puoi anche dare una classe al pulsante; La finestra di dialogo dell'interfaccia utente di jQuery supporta un array con oggetti per l'opzione pulsante, ogni oggetto contenente informazioni sugli attributi dei pulsanti.
Dennis,

Questo ha funzionato per me: $ (questo) .closest (". Ui-dialog"). Find ("button: contiene ('Save')"). Prop ("disabled", true) .addClass ("ui-state- Disabilitato");
Adrian P.

217

Sembra che qualcuno, anche in questa domanda collegata , abbia proposto questa soluzione, simile alla prima parte della risposta data da 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");
            }
        }
    ]
});

Quindi, altrove, dovresti essere in grado di utilizzare l' API per il pulsante dell'interfaccia utente jquery:

$("#button-ok").button("disable");

15
+1. Non sono sicuro del perché questa risposta non abbia ricevuto più voti. È il più pulito che abbia mai incontrato e funziona bene.
Doug Wilson,

38
Questo deve essere nei documenti ... non mostra nemmeno che puoi assegnare un ID ai pulsanti.
Jay K,

1
Questa è senza dubbio la migliore risposta. Ci sono altre soluzioni là fuori che lo fanno cercando il pulsante usando i selettori che sono sbagliati. Ottimo lavoro Nicola!
jnoreiga,

4
D'accordo: è LA soluzione che stavo pensando che il team dell'interfaccia utente dovrebbe implementare ...: +) Puoi fare ancora più velocemente:{text:"ok",disabled:true,click: function(){}}
Matthieu

10
Questo è fantastico! Puoi anche usare "class" anziché "id" se sei preoccupato che l'id sia unico. Però dovrai digitare un po 'di più per cercare il pulsante:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
desm

49

Puoi anche usare l' attributo non ora documentato disabled:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

Per abilitare dopo l'apertura della finestra di dialogo, utilizzare:

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

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


Non è che non sia documentato. È che quando i pulsanti vengono elaborati, tutte le proprietà dell'oggetto vengono eseguite in base al loro equivalente della proprietà jQuery. Ad esempio, è possibile aggiungere attr: { 'data-value' : 'some value here' }se si desidera aggiungere l'attributo data-valueal pulsante.
schiaccia il

2
Non più documentato. È ufficiale
Salman A

Questa soluzione è molto più elegante della versione più popolare. Ciò ti offre tutta la flessibilità senza il problema di selettori vagamente definiti.
KimvdLinde,

Si noti che l' disabledattributo deve essere assegnato durante la creazione dei pulsanti.
user1032531

Ho provato a sottovalutare, ma ho votato 4 ore fa e non posso farlo. Questa soluzione non sembra funzionare più correttamente.
user1032531

7

Quanto segue funziona all'interno della funzione clic dei pulsanti:

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

ma poi devi fare clic prima che sia disattivato.
Matt,

1

Un pulsante viene identificato dalla classe ui-button. Per disabilitare un pulsante:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

A meno che tu non stia creando dinamicamente la finestra di dialogo (che è possibile), conoscerai la posizione del pulsante. Quindi, per disabilitare il primo pulsante:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

La ui-state-disabledclasse è ciò che dà a un pulsante quel piacevole stile attenuato.


1

Ho creato una funzione jQuery per rendere questo compito un po 'più semplice. Probabilmente ora c'è una soluzione migliore ... in entrambi i casi, ecco i miei 2 centesimi. :)

Basta aggiungere questo al tuo file JS:

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

Disabilita il pulsante 'Ok' nella finestra di dialogo con la finestra di dialogo 'classe':

$('.dialog').dialogButtons('Ok', 'disabled');

Abilita tutti i pulsanti:

$('.dialog').dialogButtons('enabled');

Abilita il pulsante 'Chiudi' e cambia colore:

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

Testo su tutti i pulsanti rosso:

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

Spero che questo ti aiuti :)


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

1

È possibile sovrascrivere la matrice di pulsanti e lasciare solo quelli necessari.

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

1

questo codice disabilita il pulsante con "YOUR_BUTTON_LABEL". puoi sostituire il nome in Includes (). disabilitare

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

sostituisci "YOUR_BUTTON_LABEL" con l'etichetta del tuo pulsante. abilitare

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

0

Puoi farlo per disabilitare il primo pulsante, ad esempio:

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

0

Il modo in cui lo faccio è Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Questo è il modo più breve e semplice che ho trovato.


0

Se stai usando knockout, allora questo è ancora più pulito. Immagina di avere il seguente:

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>

La magia proviene dalla fonte dell'interfaccia utente jQuery :

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

Fondamentalmente puoi chiamare QUALSIASI funzione dell'istanza jQuery passandola attraverso l'oggetto pulsante.

Ad esempio, se si desidera utilizzare HTML:

{ html: '<span class="fa fa-user"></span>User' }

Oppure, se vuoi aggiungere una classe al pulsante (puoi farlo in diversi modi):

{ addClass: 'my-custom-button-class' }

Forse sei pazzo e vuoi rimuovere il pulsante dal dom quando è sospeso:

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

Sono davvero sorpreso che nessuno sembra averlo menzionato nell'innumerevole numero di thread come questo ...


0

Questo ha funzionato per me -

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

È possibile disabilitare un pulsante quando si costruisce la finestra di dialogo:

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

Oppure puoi disabilitarlo in qualsiasi momento dopo aver creato la finestra di dialogo:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.