Come posso disabilitare un pulsante in una finestra di dialogo jQuery da una funzione?

Ho una finestra di dialogo jQuery che richiede all'utente di inserire determinate informazioni. In questo modulo, ho un pulsante "continua". Vorrei che questo pulsante "continua" fosse abilitato solo una volta che tutti i campi hanno dei contenuti, altrimenti rimarrà disabilitato.

Ho scritto una funzione che viene chiamata ogni volta che uno stato del campo è cambiato. Tuttavia, non so come abilitare e disabilitare il pulsante di dialogo da questa funzione. Cosa dovrei fare?

Oops e ho dimenticato di menzionare che questi pulsanti sono stati creati come segue:

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

Si desidera impostare la proprietà disabilitata

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

Aggiornamento : Ahha, vedo la complessità ora. La finestra di dialogo di jQuery aveva un'unica riga che sarà utile (nella sezione "pulsanti".

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

Dovrai ottenere la raccolta di pulsanti dalla finestra di dialogo, scorrere quella per trovare quella che ti serve e quindi impostare l'attributo disabilitato come ho mostrato sopra.

È molto semplice:

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

Complicate dappertutto un semplice compito; la finestra di dialogo jQueryUI ha due modi per impostare i pulsanti per un motivo.

Se devi solo impostare il gestore di clic per ciascun pulsante, utilizza l'opzione che accetta un Objectargomento. Per disabilitare i pulsanti e fornire altri attributi, utilizzare l'opzione che accetta un Arrayargomento.

L'esempio seguente disabiliterà un pulsante e aggiornerà correttamente il suo stato applicando tutte le classi e gli attributi CSS jQueryUI.

Passaggio 1: crea la finestra di dialogo con uno Arraydei pulsanti:

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

Passaggio 2: abilitare / disabilitare il pulsante Fine dopo la creazione della finestra di dialogo:

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

Se crei una finestra di dialogo che fornisce gli ID per i pulsanti,

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

possiamo disabilitare il pulsante con il seguente codice:

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

Volevo essere in grado di trovare il pulsante per nome (poiché ho diversi pulsanti nella mia finestra di dialogo dell'interfaccia utente di jQuery). Ho anche diverse finestre di dialogo sulla pagina, quindi ho bisogno di un modo per ottenere i pulsanti di una finestra di dialogo specifica. Ecco la mia funzione:

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

Questo disabilita un pulsante:

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

Devi aggiungere l'id di dialogo se hai diverse finestre di dialogo in una pagina.

Ecco l'esempio della domanda modificata per disabilitare il pulsante dopo aver fatto clic:

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

Inoltre, sarà utile anche la seguente domanda: Come posso disabilitare un pulsante in una finestra di dialogo dell'interfaccia utente di jQuery?

Ho trovato un modo semplice per disabilitare (o eseguire qualsiasi altra azione) su un pulsante di dialogo.

    var dialog_selector = "#myDialogId";

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

Basta selezionare il genitore della finestra di dialogo e trovare tutti i pulsanti. Quindi, controllando il testo del pulsante, è possibile identificare i pulsanti.

Ho ottenuto questo lavoro con il metodo .dialog("widget")che restituisce la finestra di dialogo DIV stesso. Se sei nei metodi di dialogo:

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

Dal punto di vista dell'usabilità, di solito è meglio lasciare il pulsante abilitato ma mostrare un messaggio di errore se qualcuno tenta di inviare un modulo incompleto. Mi fa impazzire quando il pulsante che voglio fare clic è disabilitato e non c'è idea del perché.

Prova questo:

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

Ecco la mia funzione enableOk per una finestra di dialogo jQuery:

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

Il pulsante "primo" è quello più a destra. Entrambi disabilitate il pulsante e impostate la classe disabilitata della finestra di dialogo, per il corretto effetto visivo.

Nell'interfaccia utente precedente di jQuery (versione 1.7.3) sono stato in grado di utilizzare semplicemente

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

per disabilitare semplicemente il pulsante sull'elemento DOM stesso. Ora che abbiamo aggiornato alla più recente UI jQuery (versione 1.8.7) quel metodo non funziona più in Firefox, ma posso semplicemente chiamare la disabilitazione specifica del pulsante dell'interfaccia utente jquery e abilitare le funzioni sugli oggetti pulsante jquery:

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

ahah, ho appena trovato un metodo interessante per accedere ai bottoni

$("#dialog").dialog({

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

      }
 });

Sembra che non tutti sappiano che c'è un oggetto evento negli argomenti ...

a proposito, accede semplicemente al pulsante dall'interno del callback, in generale, è bene aggiungere un ID per l'accesso

Se vuoi davvero disabilitare un pulsante, ho scoperto che devi anche chiamare il metodo .unbind () su di esso. In caso contrario, il pulsante potrebbe essere ancora attivo e un doppio clic potrebbe comportare l'invio di più moduli. Il seguente codice funziona per me:

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

Ho trovato una soluzione alternativa che potrebbe applicarsi alle persone che cercano di fare qualcosa di simile. Invece di disabilitare il pulsante ho inserito una semplice ifistruzione nella funzione per verificare se la casella era selezionata.

In caso contrario, veniva visualizzato un semplice messaggio che indicava che la casella doveva essere selezionata prima dell'invio.

Per esempio:

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

Spero comunque che aiuti qualcuno.

Ho creato una funzione jQuery per rendere questo compito un po 'più semplice. Basta aggiungere questo al tuo file JavaScript:

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

Spero che aiuti.

Sfortunatamente nessuna soluzione fornita qui ha funzionato per diverse finestre di dialogo sulla pagina.

Inoltre, il problema era che la finestra di dialogo originale non contiene il riquadro dei pulsanti in sé, ma ne è un fratello.

Quindi mi è venuto in mente di selezionare in base all'ID della finestra di dialogo in questo modo:

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

...

e quindi la stessa funzione getFirstDialogButton () potrebbe essere successivamente utilizzata per abilitare il pulsante, ad es. dopo una validazione riuscita.

Spero che possa aiutare qualcuno.

Ecco un esempio che ho appena implementato usando il metodo Array di assegnare pulsanti, che mi consente quindi di utilizzare i selettori di identità in un secondo momento - proprio come la risposta accettata dichiarata originariamente - per abilitare / disabilitare i pulsanti e persino mostrarli / nasconderli completamente come sono facendo.

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

Dopo aver inviato correttamente, disabilito e nascondo due dei pulsanti e abilito il pulsante OK che è stato disabilitato per impostazione predefinita.

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

Spero che questo ti aiuti.

Ho creato una funzione simile a quella di Nick, ma il mio metodo non richiederebbe l'impostazione di dialogClass e sarai in grado di ottenere i pulsanti di una finestra di dialogo specifica tramite l'id (se ne esiste più di una nella tua applicazione)

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

Quindi se hai creato la finestra di dialogo in questo modo:

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

È possibile ottenere i pulsanti nel modo seguente:

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

Disabilitare:

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

Abilitare:

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

Solo per la cronaca, questo post mi ha aiutato a risolvere il mio problema. In parole povere, devi impostare l'attributo disabilitato su disabilitato, non su falso:

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

Ecco come appare tutto il codice, ho anche aggiunto alcuni stili per farlo sembrare disabilitato:

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

Penso che dovrebbe funzionare con tutti,

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

Per disabilitare il pulsante Salva nella mia finestra di dialogo usa la seguente riga nella tua funzione.

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

Per modificare un testo in un pulsante usa la seguente riga (cambia il testo del pulsante Annulla in Chiudi)

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

@Chris È possibile utilizzare le seguenti righe di codice per abilitare / disabilitare i pulsanti di dialogo fino a quando la casella di controllo non viene selezionata / deselezionata

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

Fonte originale: http://jsfiddle.net/nick_craver/rxZPv/1/

La chiamata .attr("disabled", true)ovviamente funziona, ma usando jQuery ti piacerebbe farlo in un modo più "zuccherino", quindi ho scritto una semplice estensione:

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

Ora hai funzioni enable()e disable(), quindi, puoi fare il tuo lavoro in questo modo:

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

Che è lo stesso di

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

e

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

Questo ha fatto il lavoro per me:

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

Nel mondo jQuery, se si desidera selezionare un oggetto da un set di elementi DOM, è necessario utilizzare eq () .

Esempi:

pulsante var = $ ('pulsante'). eq (1);

o

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

Secondo la documentazione :

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

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

Per poter semplicemente selezionare il pulsante, è possibile aggiungere una propria classe CSS al pulsante, che dovrebbe essere abilitata / disabilitata.

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

Quindi l'abilitazione / disabilitazione sarebbe simile a questa:

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

Se qualcuno sta cercando di sostituire un pulsante con qualcosa come un'animazione di caricamento quando viene cliccato (ad esempio quando un pulsante "Invia" invia il modulo nella finestra di dialogo), puoi sostituire il pulsante con la tua immagine in questo modo:

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

Sostituisci jQuery con documenti

Per disabilitare un pulsante, nella finestra di dialogo aperta:

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