ti-enxame.com

Como posso desabilitar um botão em um diálogo da interface do usuário do jQuery?

Como faço para desabilitar um botão na caixa de diálogo da interface do usuário da jQuery . Eu não consigo encontrar isso em qualquer documentação no link acima.

Eu tenho 2 botões na confirmação modal ("Confirmar" e "Cancelar"). Em certos casos, quero desativar o botão "Confirmar".

140
leora

Se você estiver incluindo o .button() plugin/widget que a UI do jQuery contém (se você tiver a biblioteca completa e estiver no 1.8+, você tem), você pode usá-la para desabilitar o botão e atualizam o estado visualmente, assim:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

Você pode tentar aqui ... ou se você estiver em uma versão mais antiga ou não estiver usando o widget de botão, você pode desativá-lo assim:

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

Se você quiser dentro de um diálogo específico, digamos por ID, faça o seguinte:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

Em outros casos onde :contains() pode dar falsos positivos então você pode usar .filter() assim, mas é um exagero aqui já que você conhece seus dois botões. Se for o caso em outras situações, seria assim:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

Isso impediria que :contains() correspondesse a uma substring de outra coisa.

156
Nick Craver

Parece que alguém, mesmo em esta questão ligada , propôs esta solução, semelhante à primeira parte da resposta dada por Nick Craver:

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

Então, em outro lugar, você deve poder usar o botão API para o jquery UI:

$("#button-ok").button("disable");
205
Nicola Tuveri

Você também pode usar o não agora documentado atributo disabled:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

Para ativar após o diálogo abrir, use:

$("#my-button-1").attr('disabled', false);

JsFiddle: http://jsfiddle.net/xvt96e1p/4/

48
Jérôme

Os seguintes trabalhos de dentro da função de clique dos botões:

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}
7
Chris Pietschmann

Eu criei uma função jQuery para tornar esta tarefa um pouco mais fácil. Provavelmente agora há uma solução melhor ... de qualquer forma, aqui estão meus 2 centavos. :)

Basta adicionar isso ao seu arquivo JS:

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

Desabilite o botão 'Ok' no diálogo com a classe 'dialog':

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

Ativar todos os botões:

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

Ativar o botão 'Fechar' e mudar de cor:

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

Texto em todos os botões vermelhos:

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

Espero que isto ajude :)

1
sergiodlopes
function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}
1
Ronny Sherer

Você pode sobrescrever a matriz de botões e deixar apenas os que você precisa.

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );
1
jfredys

Um botão é identificado pela classe ui-button. Para desativar um botão:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

A menos que você esteja criando dinamicamente o diálogo (o que é possível), você saberá a posição do botão. Então, para desativar o primeiro botão:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

A classe ui-state-disabled é o que dá um botão que Nice esmaeceu estilo.

1
Chris Laplante

este código desativa o botão com 'YOUR_BUTTON_LABEL'. você pode substituir o nome em contains (). para desativar

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");

substitua "YOUR_BUTTON_LABEL" pela etiqueta do seu botão. para ativar

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");
1
Sumeet_Pol

Se você estiver usando nocaute, isso é ainda mais limpo. Imagine que você tenha o seguinte:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.Push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

A mágica vem do fonte da interface do usuário do jQuery :

$( "<button></button>", props )

Basicamente, você pode chamar QUALQUER função de instância jQuery passando-a pelo objeto de botão.

Por exemplo, se você quiser usar HTML:

{ html: '<span class="fa fa-user"></span>User' }

Ou, se você quiser adicionar uma classe ao botão (você pode fazer isso de várias maneiras):

{ addClass: 'my-custom-button-class' }

Talvez você esteja louco, e você quer remover o botão do dom quando ele passa:

{ mouseover: function () { $(this).remove(); } }

Estou muito surpreso que ninguém parece ter mencionado isso no incontável número de tópicos como este ...

0
crush

Isso funcionou para mim -

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 
0
Pramod Kumar

O jeito que eu faço é Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Esta é a maneira mais curta e fácil que encontrei.

0
Bhavin

Você pode desativar um botão ao construir a caixa de diálogo:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

Ou você pode desativá-lo a qualquer momento após a criação da caixa de diálogo:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>
0
Salman A

Você poderia fazer isso para desativar o primeiro botão, por exemplo:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
0
Darin Dimitrov