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


Answers

È molto semplice:

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

Ho una finestra di dialogo jQuery che richiede all'utente di inserire determinate informazioni. In questo modulo, ho un pulsante "continua". Mi piacerebbe che il pulsante "continua" fosse abilitato solo quando tutti i campi contengono del contenuto, altrimenti rimarrà disattivato.

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

Oops e ho dimenticato di dire 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');
      }
    }
  })
});



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 tuo pulsante, puoi identificare i tuoi pulsanti.




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

jQuery replaceWith docs




Questo ha fatto il lavoro per me:

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



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

$("#dialog").dialog({

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

      }
 });

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

a proposito, accede semplicemente al pulsante all'interno della richiamata, in generale, è bene aggiungere un ID per l'accesso




Questo disabilita un pulsante:

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

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




Ho trovato una soluzione alternativa che potrebbe essere applicata alle persone che cercano di fare qualcosa di simile. Invece di disabilitare il pulsante, ho inserito una semplice istruzione if nella funzione per verificare se la casella di controllo era selezionata.

In caso contrario, viene visualizzato un semplice messaggio che indica che la casella deve essere controllata 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");
            }
        }
    }
});

Ad ogni modo, spero che aiuti qualcuno.




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>



Volevo essere in grado di trovare il pulsante per nome (dal momento che ho diversi pulsanti nella finestra di dialogo dell'interfaccia utente 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' );
}



Ho creato una funzione simile a quella che Nick ha fatto, ma il mio metodo non richiede l'impostazione di dialogClass e sarete in grado di ottenere i pulsanti di una finestra di dialogo specifica tramite l'id (se ne esiste più di uno nella vostra 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');
                  }
      }
});

Puoi ottenere i pulsanti attenendo alla seguente procedura:

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



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



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 "primo" pulsante è quello più a destra. Entrambi disabilitate il pulsante e impostate la classe disabilitata della finestra di dialogo, per il corretto effetto visivo.




@ Crisi È possibile utilizzare le seguenti righe di codice per abilitare / disabilitare i pulsanti di dialogo fino a quando la casella di spunta non è 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/




Sfortunatamente nessuna soluzione fornita qui ha funzionato per diversi dialoghi sulla pagina.

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

Quindi mi è venuto in mente di selezionare l'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 utilizzata in seguito per abilitare il pulsante, ad es. dopo la validazione riuscita.

Spero che possa aiutare qualcuno.




Avevo un pulsante che non volevo mostrare fino a un punto di attivazione.

All'inizio ho provato questo che funziona: -

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

ma lascia una linea (perché sono andati tutti!), quindi ho aggiunto questo nel mio CSS: -

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

Questo nasconde TUTTI i pulsanti.

Posso riattivare quando necessario da: -

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





Related