Como posso desativar um botão em uma caixa de diálogo jQuery de uma função?

Eu tenho uma caixa de diálogo jQuery que requer que o usuário insira certas informações. Neste formulário, eu tenho um botão "continuar". Gostaria que esse botão "continuar" fosse ativado apenas quando todos os campos tivessem conteúdo, caso contrário, ele permanecerá desativado.

Eu escrevi uma função que é chamada toda vez que um status de campo é alterado. No entanto, não sei como habilitar e desabilitar o botão de diálogo desta função. O que devo fazer?

Opa e esqueci de mencionar que esses botões foram criados da seguinte maneira:

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

Você deseja definir a propriedade desativada

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

Atualização : Ahha, eu vejo a complexidade agora. O jQuery Dialog tinha uma única linha que será útil (na seção "botões").

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

Você precisará obter a coleção de botões na caixa de diálogo, percorrê-la para encontrar qual você precisa e, em seguida, defina o atributo desativado como mostrei acima.

É muito simples:

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

Você acabou complicando uma tarefa simples; a caixa de diálogo jQueryUI possui duas maneiras de definir botões por um motivo.

Se você precisar definir apenas o manipulador de cliques para cada botão, use a opção que aceita um Objectargumento. Para desativar botões e fornecer outros atributos, use a opção que aceita um Arrayargumento.

O exemplo a seguir desativará um botão e atualizará seu estado corretamente aplicando todas as classes e atributos CSS do jQueryUI.

Etapa 1 - Crie sua caixa de diálogo com um Arraydos botões:

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

Etapa 2 - Ativar / desativar o botão Concluído após a criação da caixa de diálogo:

// 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 você criar uma caixa de diálogo fornecendo IDs para os botões,

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

podemos desativar o botão com o seguinte código:

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

Queria poder encontrar o botão pelo nome (já que tenho vários botões na caixa de diálogo jQuery UI). Também tenho várias caixas de diálogo na página, então preciso de uma maneira de obter os botões de uma caixa de diálogo específica. Aqui está a minha função:

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

Isso desativa um botão:

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

Você precisará adicionar a identificação da caixa de diálogo se tiver várias caixas de diálogo em uma página.

Aqui está o exemplo da pergunta modificada para desativar o botão uma vez clicado:

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

Além disso, a seguinte pergunta também será útil com isso: Como posso desativar um botão em uma caixa de diálogo jQuery UI?

Encontrei uma maneira fácil de desativar (ou executar qualquer outra ação) em um botão da caixa de diálogo.

    var dialog_selector = "#myDialogId";

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

Você simplesmente seleciona o pai da sua caixa de diálogo e encontra todos os botões. Depois de verificar o texto do seu botão, você pode identificar seus botões.

Eu consegui isso trabalhando com o método .dialog("widget")que retorna a própria caixa de diálogo DIV. Se você estiver nos métodos de diálogo:

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

Do ponto de vista da usabilidade, geralmente é melhor deixar o botão ativado, mas mostrar uma mensagem de erro se alguém tentar enviar um formulário incompleto. Isso me deixa louco quando o botão em que quero clicar está desativado e não há nenhuma pista do porquê.

Tente o seguinte:

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

Aqui está minha função enableOk para uma caixa de diálogo 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');
    }
}

O botão "primeiro" é o mais à direita. Você desabilita o botão e define a classe desabilitada da caixa de diálogo, para o efeito visual adequado.

Na interface do usuário legada do jQuery (versão 1.7.3), eu era capaz de simplesmente usar

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

apenas desativar o botão no próprio elemento DOM. Agora que atualizamos para a nova jQuery UI (versão 1.8.7), esse método não funciona mais no Firefox, mas posso simplesmente chamar o botão jquery UI específico para desativar e ativar funções nos objetos jquery do botão:

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

haha, acabei de encontrar um método interessante para acessar os botões

$("#dialog").dialog({

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

      }
 });

Parece que todos vocês não sabem que há um objeto de evento nos argumentos ...

a propósito, ele apenas acessa o botão de dentro do retorno de chamada; em casos gerais, é bom adicionar um ID para acesso

Se você realmente deseja desativar um botão, descobri que você também precisa chamar o método .unbind (). Caso contrário, o botão ainda poderá estar ativo e um clique duplo poderá levar a vários envios de formulário. O código a seguir funciona para mim:

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

Encontrei uma solução alternativa que pode ser aplicada a pessoas que tentam fazer algo semelhante. Em vez de desativar o botão, coloquei uma ifinstrução simples na função para verificar se a caixa de seleção foi marcada.

Caso contrário, exibia uma mensagem simples informando que a caixa precisava ser marcada antes do envio.

Por exemplo:

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

Enfim, espero que ajude alguém.

Eu criei uma função jQuery para facilitar essa tarefa. Basta adicionar isso ao seu arquivo 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;}
});};

Desative o botão 'OK' na caixa de diálogo com a classe 'dialog':

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

Ative todos os botões:

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

Ative o botão 'Fechar' e altere a cor:

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

Eu espero que isso ajude.

Infelizmente, nenhuma solução fornecida aqui funcionou para várias caixas de diálogo na página.

Além disso, o problema era que a caixa de diálogo original não contém o painel de botões em si, mas é um irmão dela.

Então, eu pensei em selecionar por ID da caixa de diálogo assim:

        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 a mesma função getFirstDialogButton () poderia ser usada posteriormente para ativar o botão, por exemplo, após a validação bem-sucedida.

Espero que possa ajudar alguém.

Aqui está um exemplo que eu acabei de implementar usando o método Array de atribuir botões, que depois me permite usar seletores de identificação mais tarde - assim como a resposta aceita declarada originalmente - para ativar / desativar botões e até mostrá-los / ocultá-los completamente como estou fazendo.

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

Após o envio bem-sucedido, desativo e oculto dois dos botões e o botão OK que foi desabilitado por padrão.

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

Espero que isto ajude.

Criei uma função semelhante ao que Nick fez, mas meu método não exigiria a configuração de dialogClass e você poderá obter os botões de uma caixa de diálogo específica por meio do ID (se houver mais de uma no seu aplicativo)

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

Portanto, se você criou o diálogo da seguinte maneira:

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

Você pode obter os botões fazendo o seguinte:

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

Desabilitar:

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

Para habilitar:

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

Apenas para constar, este post me ajudou a resolver meu problema. Em poucas palavras, você deve definir o atributo desativado como desativado, e não falso:

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

É assim que todo o código fica, também adicionei alguns estilos para torná-lo desativado:

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

Eu acho que deveria funcionar com todos,

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

Para desativar o botão Salvar na minha caixa de diálogo, use a seguinte linha em sua função.

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

Para alterar um texto em um botão, use a seguinte linha (altere o texto do botão Cancelar para Fechar-me)

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

@ Chris Você pode usar as seguintes linhas de código para ativar / desativar os botões da caixa de diálogo até que sua caixa de seleção marque / desmarque

<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 original: http://jsfiddle.net/nick_craver/rxZPv/1/

Chamar é .attr("disabled", true)claro que funciona, mas usando o jQuery você gostaria de fazê-lo de maneira mais "açucarada", então escrevi uma extensão simples:

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

Agora você tem funções enable()e disable(), portanto, pode fazer seu trabalho dessa maneira:

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

Qual é o mesmo que

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

e

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

Isso fez o trabalho para mim:

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

No mundo do jQuery, se você deseja selecionar um objeto de um conjunto de elementos DOM, use eq () .

Exemplos:

var botão = $ ('botão'). eq (1);

ou

var botão = $ ('botão: eq (1)');

De acordo com a documentação :

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

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

Para poder simplesmente selecionar o botão, você pode adicionar uma própria classe CSS ao botão, que deve ser ativada / desativada.

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

Em seguida, a ativação / desativação ficaria assim:

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

Se alguém estiver olhando para substituir um botão por algo como uma animação de carregamento quando clicado (por exemplo, quando um botão "Enviar" envia o formulário na caixa de diálogo) - você pode substituir o botão pela sua imagem da seguinte maneira:

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

jQuery replaceWith docs

Para desativar um botão, na caixa de diálogo aberta:

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