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

237

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');
      }
    }
  })
});
Draco
fonte
Há uma boa resposta em: stackoverflow.com/questions/3646408/…
Amir
3

Respostas:

260

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.

Tom Ritter
fonte
Infelizmente, a caixa de diálogo JQuery não facilita demais, portanto você precisará trabalhar um pouco.
21411 Tom Ritter
Sim, mas a opção de botões não retorna elementos DOM, mas funciona - a interação entre eles é boa, mas desativar um não é tão simples. Estou faltando alguma coisa aqui?
Remi Despres-Smyth
1
Você precisa solucionar esse método para desativar os botões. Use o jQuery-foo para obter os elementos dom resultantes da página.
23910 Stefan Kendall
36
Concordado - então, por que essa é a resposta selecionada? -1 para incompleto.
Remi Despres-Smyth
22
Eu acredito que .prop('disabled', true)é o preferido em jQuery 1.6+
Molomby
191

É muito simples:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
Raman
fonte
4
Eu gosto dessa solução, mas ela realmente deve ler: $ (": button: contains ('Authenticate')"). Attr ("disabled", "disabled"). AddClass ('ui-state-disabled'); (o addClass estava faltando)
Eric Asberry
4
Se houver várias caixas de diálogo, você precisará definir a caixa de diálogo que precisa alterar: $ ("# dialogId"). Parent (). $ (": Button: contém ('Autenticar')"). Attr ("disabled", " disabled "). addClass ('ui-state-disabled');
podeig
5
+1: Esta é a melhor resposta de longe ... A resposta aceita não responde a nada, apenas sugere uma abordagem imperativa - o que é complicado: entre nós: não precisamos repetir nada, o jquery pode fazer isso por nós.
rsenna
1
Descobri que isso também funciona, pois os botões do diálogo jQueryUI são botões jQueryUI: $ ("# dialogID"). Parent (). Find (": button: contains ('Authenticate')"). Button ("disable") ;
writes_on
12
Eu acredito que .prop('disabled', true)é o preferido em jQuery 1.6+
Molomby
38

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);
Ido Sela
fonte
2
Idéia certa, mas o eachloop é desnecessário. Especifique um classatributo na buttonsmatriz e você pode usá-lo para encontrar o elemento certo.
Cdmckay
como o cdmackay disse, você não precisa fazer um loop. No seu exemplo acima, você pode simplesmente usar o seletor jQuery: var $ doneButton = $ ("# done");
Rob
Quando tento criar os botões usando o método acima (o modo array), os botões estão sendo exibidos como '1' e '0' e não como 'Concluído' e 'Cancelar'. Por que isso está acontecendo? O texto não está sendo mostrado no botão e nem a função de clique está sendo acionada.
Harke
1
Isso funciona para mim e você não precisa do loop. Defina o ID e acesse o elemento: this.myDialog.dialog ("option", "buttons", [{id: "addAdapterFormOkButton", texto: "OK", clique em: function () {}}]) Então você só precisa para acessá-lo com o seletor como todos dizem acima: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ('ui-state-disabled'); okButt.attr ('desativado', verdadeiro);
Gurnard
32

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);
vitalnik
fonte
7
Eu lhe dei +1, mas acho que é melhor usar o método em vez da propriedade do botão, como: $ ("# dialogSave"). button ("disable");
Fareed Alnamrouti 12/03/12
1
Ha! Mais fácil de longe! Mas use o método conforme indicado.
PapillonUK
29

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' );
}
usuario
fonte
Ótima solução. Eu mencionaria na solução, no entanto, que o painel de botões não é filho da caixa de diálogo - a chave é definir uma caixa de diálogo exclusivaClass e usá-la para o seletor. Isso me pegou quando eu estava olhando.
Remi Despres-Smyth
Interessante que o texto do botão seja definido pela tecla do objeto de botões. Parece estar limitado a quando você não precisa definir o atributo. Caso contrário, a versão do array é melhor, onde o texto é definido explicitamente por botão.
Gerard ONeill
19

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.

Rainer Blessing
fonte
11

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?

Chris Pietschmann
fonte
9

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.

Hugh Turner
fonte
9

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);
Guillaume Aversa
fonte
8

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

erikkallen
fonte
6

Tente o seguinte:

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

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.

Remi Despres-Smyth
fonte
Observe que isso pressupõe que você tenha apenas uma caixa de diálogo na página. Desde então, escrevi uma função para buscar qualquer botão pelo nome em qualquer caixa de diálogo da página para lidar com isso.
Remi Despres-Smyth
5

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');
Matt Palmerlee
fonte
5

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

haohaolee
fonte
1
Eu não acho que isso vai funcionar. Desativará o botão apenas quando o botão OK for clicado duas vezes.
Jean-François Beauchamp
Eu precisava desativar um botão OK em uma caixa de diálogo até o processamento ser concluído. Isso funcionou perfeitamente.
CodingYoshi
4

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');
pós-profissional
fonte
4

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.

Peter Mortensen
fonte
4

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.

sergiodlopes
fonte
3

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.

Timur Evdokimov
fonte
3

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.

Jeremiah Ware
fonte
3

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');
Shao
fonte
3

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);
Peter Mortensen
fonte
3

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>
Peter Mortensen
fonte
2

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");
Chanaka
fonte
1

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

Chanaka
fonte
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);
Marinheiro Danubiano
fonte
1

Isso fez o trabalho para mim:

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

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

Diewland
fonte
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);
PaN1C_Showt1Me
fonte
0

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

Robbie Averill
fonte
0

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