jquery ui themes

¿Cómo puedo deshabilitar un botón en un diálogo de jQuery desde una función?

Question

Tengo un diálogo de jQuery que requiere que el usuario ingrese cierta información. En esta forma, tengo un botón "continuar". Me gustaría que este botón "continuar" solo se habilite una vez que todos los campos tengan contenido, de lo contrario, permanecerá deshabilitado.

Escribí una función que se llama cada vez que cambia el estado de un campo. Sin embargo, no sé cómo habilitar y deshabilitar el botón de diálogo de esta función. ¿Qué tengo que hacer?

Vaya y olvidé mencionar que estos botones se crearon de la siguiente manera:

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

Answer 1

@Chris Puede usar las siguientes líneas de código para habilitar / deshabilitar los botones de diálogo hasta que su casilla de verificación marque / deseleccione

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

Fuente original: http://jsfiddle.net/nick_craver/rxZPv/1/

Answer 2

Aquí está la muestra de la pregunta modificada para desactivar el botón una vez que se hace clic:

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

Además, la siguiente pregunta también será útil con esto: ¿Cómo puedo desactivar un botón en un diálogo de jQuery UI?

Answer 3

Aquí está mi función enableOk para un diálogo de 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'');
    }
}

El botón "primero" es el que está más a la derecha. Ambos deshabilitan el botón y configuran la clase deshabilitada del diálogo, para el efecto visual adecuado.

Answer 4

Aquí hay un ejemplo que acabo de implementar utilizando el método Array de asignar botones, que luego me permite usar los selectores de identificación más adelante, tal como se indicó originalmente en la respuesta aceptada, para habilitar / deshabilitar botones e incluso mostrarlos / ocultarlos completamente cuando estoy obra.

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

Después de enviar con éxito, deshabilito y oculto dos de los botones y habilito el botón Aceptar que fue deshabilitado por defecto.

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

Espero que esto ayude.

Answer 5

Conseguí esto trabajando con el método .dialog("widget") que devuelve el diálogo DIV. Si estás en los métodos de diálogo:

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

Answer 6

Creé una función jQuery para hacer esta tarea un poco más fácil. Solo agrega esto a tu archivo 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;}
});};

Desactive el botón ''OK'' en el diálogo con la clase ''diálogo'':

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

Habilitar todos los botones:

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

Habilitar el botón ''Cerrar'' y cambiar de color:

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

Espero que esto ayude.

Answer 7

Creé una función similar a la que hizo Nick, pero mi método no requeriría configurar la clase de diálogo y usted podrá obtener los botones de un diálogo específico a través de la identificación (si existe más de una en su aplicación)

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

Así que si creaste el diálogo así:

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

Puede obtener los botones haciendo lo siguiente:

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

Deshabilitar:

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

Para permitir:

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

Answer 8

Creo que debería funcionar con 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>

Answer 9

Desde una perspectiva de usabilidad, generalmente es mejor dejar el botón habilitado pero mostrar un mensaje de error si alguien intenta enviar un formulario incompleto. Me vuelve loco cuando el botón que quiero hacer clic está deshabilitado y no hay ninguna pista de por qué.

Answer 10

En el mundo jQuery, si desea seleccionar un objeto de un conjunto de elementos DOM, debe usar eq() .

Ejemplos:

botón var = $ (''botón''). eq (1);

o

botón var = $ (''botón: eq (1)'');

Answer 11

En la IU de jQuery heredada (versión 1.7.3) pude usar simplemente

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

para simplemente deshabilitar el botón en el elemento DOM en sí. Ahora que hemos actualizado a la nueva interfaz de usuario de jQuery (versión 1.8.7), ese método ya no funciona en Firefox, pero simplemente puedo llamar a las funciones deshabilitar y habilitar específicas del botón de la interfaz de usuario de jQuery en los botones de objetos de jQuery:

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

Answer 12

Encontré una manera fácil de deshabilitar (o realizar cualquier otra acción) en un botón de diálogo.

    var dialog_selector = "#myDialogId";

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

Simplemente selecciona el padre de tu diálogo y encuentra todos los botones. Luego, al verificar el texto de su botón, puede identificar sus botones.

Answer 13

Encontré una solución que puede aplicarse a las personas que intentan hacer algo similar. En lugar de desactivar el botón, puse una instrucción if simple en la función para verificar si la casilla de verificación estaba marcada.

Si no lo era, mostraba un mensaje simple que decía que había que marcar la casilla antes de enviarlo.

Por ejemplo:

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

De todos modos, espero que ayude a alguien.

Answer 14

Es muy sencillo:

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

Answer 15

Esto desactiva un botón:

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

Debe agregar el ID de diálogo si tiene varios cuadros de diálogo en una página.

Answer 16

Esto hizo el trabajo por mí:

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

Answer 17

Lamentablemente, ninguna solución de aquí dada funcionó para varios diálogos en la página.

También el problema fue que el diálogo original no contiene el panel de botones en sí mismo, pero es un hermano de él.

Entonces se me ocurrió seleccionar por ID de diálogo así:

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

...

y luego la misma función getFirstDialogButton () podría usarse más adelante para habilitar el botón, por ejemplo, después de una validación exitosa.

Espero que pueda ayudar a alguien.

Answer 18

Para deshabilitar el botón Guardar en mi cuadro de diálogo, use la siguiente línea en su función.

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

Para cambiar un texto en un botón, use la siguiente línea (esto cambia el texto del botón de cancelar a Cerrar)

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

Answer 19

Para deshabilitar un botón, en el cuadro de diálogo abierto:

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

Answer 20

Por .attr("disabled", true) llamar a .attr("disabled", true) funciona, pero al usar jQuery te gustaría hacerlo de una manera más ''azucarada'', así que escribí una extensión simple:

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

Ahora tiene las funciones enable() y disable() , por lo que puede hacer su trabajo de esa manera:

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

Que es igual que

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

y

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

Answer 21

Prueba esto:

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

Answer 22

Quería poder encontrar el botón por nombre (ya que tengo varios botones en mi diálogo de jQuery UI). También tengo varios diálogos en la página, así que necesito una forma de obtener los botones de un diálogo específico. Aquí está mi función:

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

Answer 23

Si alguien está buscando reemplazar un botón con algo como una animación de carga al hacer clic (por ejemplo, cuando un botón "Enviar" envía el formulario en el cuadro de diálogo), puede reemplazar el botón con su imagen como esta:

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

jQuery replaceWith docs

Answer 24

Si crea un cuadro de diálogo que proporciona los ID de los botones,

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

Podemos desactivar el botón con el siguiente código:

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

Answer 25

Si realmente desea deshabilitar un botón, descubrí que también necesita llamar al método .unbind (). De lo contrario, es posible que el botón aún esté activo y un doble clic podría llevar a múltiples envíos de formularios. El siguiente código funciona para mí:

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

Answer 26

Solo para que quede constancia, esta publicación me ayudó a resolver mi problema. En pocas palabras, debe establecer el atributo deshabilitado en deshabilitado, no en falso:

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

Así es como se ve todo el código, también agregué algunos estilos para que se vea deshabilitado:

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

Answer 27

Tenía un botón que no quería mostrar hasta un punto de activación.

Al principio intenté esto que funciona:

$(":button:contains(''OK'')").hide();

pero deja una línea (¡porque todos se han ido!), así que agregué esto en mi CSS: -

.ui-dialog .ui-dialog-buttonpane {
display: none;
}

Esto oculta TODOS los botones.

Puedo volver a habilitar cuando sea necesario por: -

$(''.ui-dialog .ui-dialog-buttonpane'').css({"display":"block"}); //show button

Answer 28

Todo está complicando una tarea simple; El diálogo jQueryUI tiene dos formas de configurar botones por una razón.

Si solo necesita configurar el controlador de clic para cada botón, use la opción que tome un argumento de Object . Para deshabilitar botones y proporcionar otros atributos, use la opción que toma un argumento de Array .

El siguiente ejemplo deshabilitará un botón y actualizará su estado correctamente aplicando todas las clases y atributos de jQueryUI CSS.

Paso 1 - Crea tu diálogo con una Array de botones:

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

Paso 2: habilitar / deshabilitar el botón Listo después de crear el cuadro 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);

Answer 29

Usted querría establecer la propiedad deshabilitada

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

Actualización : Ahha, veo la complejidad ahora. El jQuery Dialog tenía una sola línea que será de utilidad (en la sección "botones").

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

Necesitará obtener la colección de botones del cuadro de diálogo, recorrer en bucle para encontrar cuál necesita, y luego establecer el atributo deshabilitado como se muestra arriba.

Answer 30

jaja, acabo de encontrar un método interesante para acceder a los bottons

$("#dialog").dialog({

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

      }
 });

Parece que todos ustedes no saben que hay un objeto de evento en los argumentos ...

por cierto, solo tiene acceso al botón desde la devolución de llamada, en general, es bueno agregar una identificación para el acceso