example - jquery popup window

¿Cómo puedo desactivar un botón en un cuadro de diálogo de la interfaz de usuario jQuery?

Question

¿Cómo hago para deshabilitar un botón en el cuadro de diálogo de la interfaz de usuario jQuery ? Parece que no puedo encontrar esto en ninguna de la documentación en el enlace de arriba.

Tengo 2 botones en la confirmación modal ("Confirmar" y "Cancelar"). En ciertos casos, deseo desactivar el botón "Confirmar".

Answer 1

Creé una función jQuery para facilitar esta tarea. Probablemente ahora hay una mejor solución ... de cualquier forma, aquí están mis 2cents. :)

Simplemente agregue esto a su archivo 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;}
});};

Desactiva el botón ''Ok'' en el diálogo con la clase ''diálogo'':

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

Habilitar todos los botones:

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

Habilite el botón ''Cerrar'' y cambie el color:

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

Texto en todos los botones rojos:

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

Espero que esto ayude :)

Answer 2

Esto funcionó para mí -

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

Answer 3

La forma en que lo hago es Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); } Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

Esta es la forma más corta y fácil que encontré.

Answer 4

Lo siguiente funciona desde la función de clic de botones:

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

Answer 5

Parece que cualquiera, incluso en esta pregunta vinculada , ha propuesto esta solución, similar a la primera parte de la respuesta 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");
            }
        }
    ]
});

Luego, en cualquier otro lugar, debería poder usar la API para el botón de la IU de jquery:

$("#button-ok").button("disable");

Answer 6

Puede deshabilitar un botón cuando construye el 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("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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

O puede desactivarlo en cualquier momento después de que se crea el 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("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://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>

Answer 7

Puede hacer esto para desactivar el primer botón, por ejemplo:

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

Answer 8

Puede sobreescribir la matriz de botones y dejar solo los que necesita.

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

Answer 9

Si estás usando knockout, entonces este es aún más limpio. Imagina que tienes lo siguiente:

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>

La magia proviene de la fuente jQuery UI :

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

Básicamente puede llamar a CUALQUIER función de instancia de jQuery pasándola a través del objeto de botón.

Por ejemplo, si quieres usar HTML:

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

O bien, si desea agregar una clase al botón (puede hacerlo de varias maneras):

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

Tal vez estás loco, y quieres quitar el botón de la dom cuando está suspendido:

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

Estoy realmente sorprendido de que nadie parezca haber mencionado esto en la innumerable cantidad de temas como este ...

Answer 10

Si incluye el complemento / widget .button() que contiene la interfaz de usuario jQuery (si tiene la biblioteca completa y está en 1.8+, la tiene), puede usarla para desactivar el botón y actualizar el estado visualmente, como esta:

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

Puede intentarlo aquí ... o si está en una versión anterior o no usa el widget de botón, puede desactivarlo de esta manera:

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

Si lo quiere dentro de un cuadro de diálogo específico, digamos por ID, haga esto:

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

En otros casos en los que :contains() podría dar falsos positivos, entonces puedes usar .filter() esta manera, pero aquí es demasiado, ya que conoces tus dos botones. Si ese es el caso en otras situaciones, se vería así:

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

Esto evitaría que :contains() coincida con una subcadena de otra cosa.

Answer 11

También puede usar el atributo disabled no documentado ahora:

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

    }]
});

Para habilitar después de que se haya abierto el cuadro de diálogo, use:

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

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

Answer 12

Un botón se identifica por el ui-button clase. Para deshabilitar un botón:

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

A menos que esté creando dinámicamente el diálogo (que es posible), sabrá la posición del botón. Entonces, para desactivar el primer botón:

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

La clase ui-state-disabled es lo que le da a un botón ese agradable estilo atenuado.

Answer 13

este código desactiva el botón con ''YOUR_BUTTON_LABEL''. puedes reemplazar el nombre en contains (). deshabilitar

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

reemplace ''YOUR_BUTTON_LABEL'' con la etiqueta de su botón. para permitir

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

Answer 14

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