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




15 Answers

Si vorrebbe impostare la proprietà disabilitata

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

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

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

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

append esempio

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



Sei tutto finito per complicare un compito semplice; la finestra di dialogo jQueryUI ha due modi per impostare i pulsanti per un motivo.

Se è necessario impostare il gestore di clic per ciascun pulsante, utilizzare l'opzione che accetta un argomento Object . Per disabilitare i pulsanti e fornire altri attributi, utilizzare l'opzione che accetta un argomento Array .

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

Passaggio 1: crea la tua finestra di dialogo con una serie di 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: attiva / disattiva il pulsante Fine dopo aver creato la 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 fornisca 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);



Ecco l'esempio della domanda modificata per disabilitare il pulsante una volta cliccato:

$(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, la seguente domanda sarà utile anche con questo: Come posso disabilitare un pulsante su una finestra di dialogo dell'interfaccia utente jQuery?




Dal punto di vista dell'usabilità, in genere è 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 cliccare è disabilitato e non c'è alcun indizio sul perché.




Prova questo:

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



Nella legacy jQuery UI (versione 1.7.3) sono stato in grado di usare semplicemente

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

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

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



Se vuoi veramente disabilitare un pulsante, ho scoperto che devi anche chiamare il metodo .unbind (). 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 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;}
});};

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




Ecco un esempio che ho appena implementato usando il metodo Array di assegnazione dei pulsanti, che quindi mi consente di utilizzare i selettori di id in un secondo momento - proprio come la risposta accettata in origine - 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, disattivo e nascondo due dei pulsanti e abilita il pulsante OK che era disabilitato di default.

$('#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.




Per la cronaca, questo post mi ha aiutato a risolvere il mio problema. In poche parole, 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 renderlo 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);



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

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

Per cambiare un testo in un pulsante usa la seguente linea (questo cambia il testo del pulsante Annulla in Chiude)

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



Calling .attr("disabled", true) ovviamente funziona, ma usando jQuery ti piacerebbe farlo in un modo più "sugar", quindi ho scritto un'estensione semplice:

(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 le funzioni enable() e disable() , così puoi fare il tuo lavoro in questo modo:

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

Che è uguale a

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

e

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



Nel mondo jQuery, se vuoi selezionare un oggetto da un insieme di elementi DOM, dovresti usare eq() .

Esempi:

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

o

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




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



Related