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


237

Tengo un cuadro de diálogo jQuery que requiere que el usuario ingrese cierta información. De 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 desde esta función. ¿Qué tengo que hacer?

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

Hay una buena respuesta en: stackoverflow.com/questions/3646408/…
Amir

3
Investigué esto bastante y descubrí que la solución más limpia, con diferencia, se describe en el siguiente enlace: stackoverflow.com/a/4279852

Respuestas:


260

Desea 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á útil (en la sección "botones".

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

Tendrá que obtener la colección de botones del cuadro de diálogo, recorrerlo para encontrar cuál necesita y luego configurar el atributo deshabilitado como se mostró anteriormente.


Desafortunadamente, el cuadro de diálogo JQuery no lo hace demasiado fácil, por lo que tendrá que trabajar un poco.
Tom Ritter

Sí, pero la opción de botones no devuelve elementos DOM sino funciones: iterar a través de ellos está bien, pero deshabilitar uno no es tan sencillo. ¿Me estoy perdiendo de algo?
Remi Despres-Smyth

1
Debe evitar este método para deshabilitar los botones. Use jQuery-foo para sacar los elementos dom resultantes de la página.
Stefan Kendall

36
De acuerdo, entonces, ¿por qué es esta la respuesta seleccionada? -1 para incompleto.
Remi Despres-Smyth

22
Creo que .prop('disabled', true)es preferido en jQuery 1.6+
Molomby

191

Es muy simple:

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

44
Me gusta esta solución, pero realmente debería leer: $ (": botón: contiene ('Autenticar')"). Attr ("disabled", "disabled"). AddClass ('ui-state-disabled'); (faltaba el addClass)
Eric Asberry

44
Si hay varios cuadros de diálogo, debe definir qué cuadro de diálogo debe cambiar: $ ("# dialogId"). Parent (). $ (": Button: contiene ('Authenticate')"). Attr ("disabled", " disabled "). addClass ('ui-state-disabled');
podeig

55
+1: Esta es la mejor respuesta con diferencia ... La respuesta aceptada no responde nada, solo sugiere un enfoque imperativo, lo cual es engorroso por cierto: no necesitamos recorrer nada, jquery puede hacer eso por nosotros.
rsenna

1
Descubrí que esto también funciona, ya que los botones dentro del cuadro de diálogo jQueryUI son botones jQueryUI: $ ("# dialogID"). Parent (). Find (": button: contiene ('Authenticate')"). Button ("disable") ;
escribe

12
Creo que .prop('disabled', true)es preferido en jQuery 1.6+
Molomby

38

Has terminado de complicar una tarea simple; El cuadro de 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 toma un Objectargumento. Para deshabilitar botones y proporcionar otros atributos, use la opción que toma un Arrayargumento.

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 uno Arrayde los 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: active / desactive 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);

2
Idea correcta, pero el eachbucle es innecesario. Especifique un classatributo en la buttonsmatriz y puede usarlo para encontrar el elemento correcto.
cdmckay

como dijo cdmackay, no necesita hacer un bucle. En su ejemplo anterior, puede seguir adelante y usar un selector jQuery: var $ doneButton = $ ("# done");
Rob

Cuando intento crear los botones utilizando el método anterior (la forma de matriz), los botones se muestran como '1' y '0' y no como 'Listo' y 'Cancelar'. ¿Por qué está pasando esto? El texto no se muestra en el botón y tampoco se activa la función de clic.
Harke

1
Esto funciona para mí y no necesitas el bucle. Establezca la identificación y luego acceda al elemento: this.myDialog.dialog ("opción", "botones", [{id: "addAdapterFormOkButton", texto: "OK", haga clic en: función () {}}]) Entonces solo necesita para acceder con el selector como todos dicen arriba: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ('ui-state-disabled'); okButt.attr ('deshabilitado', verdadero);
Gurnard

32

Si crea un cuadro de diálogo que proporciona identificaciones para 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);

77
le he dado +1 pero creo que es mejor usar el método en lugar de la propiedad del botón como: $ ("# dialogSave"). button ("deshabilitar");
Fareed Alnamrouti

1
¡Decir ah! Más fácil de lejos! Pero use el método como dice la tarifa.
PapillonUK

29

Quería poder encontrar el botón por nombre (ya que tengo varios botones en mi cuadro de diálogo jQuery UI). También tengo varios cuadros de diálogo en la página, así que necesito una forma de obtener los botones de un cuadro de 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' );
}

Buena solución Sin embargo, mencionaría en la solución que el panel de botones no es un elemento secundario del cuadro de diálogo: la clave es establecer una clase de diálogo única y usarla para el selector. Esto me atrapó cuando lo estaba mirando.
Remi Despres-Smyth

Es interesante que el texto del botón se establezca mediante la clave del objeto de botones. Parece estar limitado a cuando no necesita establecer el atributo. De lo contrario, la versión de matriz es mejor, donde el texto se establece explícitamente por botón.
Gerard ONeill

19

Esto deshabilita un botón:

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

Debe agregar la identificación del cuadro de diálogo si tiene varios cuadros de diálogo en una página.


11

Aquí está el ejemplo de la pregunta modificada para deshabilitar 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 cuadro de diálogo de jQuery UI?


9

Encontré una manera fácil de desactivar (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 seleccione el padre de su diálogo y encuentre todos los botones. Luego, revisando el Texto de su botón, puede identificar sus botones.


9

Obtuve esto trabajando con el método .dialog("widget")que devuelve el cuadro de 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);

8

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 en el que quiero hacer clic está deshabilitado y no hay idea de por qué.


6

Prueba esto:

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

5

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

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


Tenga en cuenta que esto supone que solo tiene un cuadro de diálogo en la página. Desde entonces, he escrito una función para buscar cualquier botón por nombre de cualquier cuadro de diálogo en la página para tratar esto.
Remi Despres-Smyth

5

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

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

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

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

5

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

$("#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 accede al botón desde dentro de la devolución de llamada, en casos generales, es bueno agregar una identificación para acceder


1
No creo que esto funcione. Solo desactivará el botón cuando haga clic en el botón Aceptar.
Jean-François Beauchamp

Necesitaba desactivar un botón Aceptar en un cuadro de diálogo hasta que se completara el procesamiento. Esto funcionó perfectamente.
CodificaciónYoshi

4

Si realmente desea deshabilitar un botón, descubrí que también debe llamar al método .unbind (). De lo contrario, el botón aún puede estar activo, y un doble clic podría generar 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');

4

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

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

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 eso ayude a alguien.


4

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

Deshabilite el botón 'Aceptar' 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');

Espero que esto ayude.


3

Desafortunadamente, ninguna de las soluciones proporcionadas aquí funcionó para varios diálogos en la página.

Además, el problema era que el diálogo original no contiene el panel de botones en sí mismo, sino que es un hermano del mismo.

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 tarde para habilitar el botón, por ejemplo, después de una validación exitosa.

Espero que pueda ayudar a alguien.


3

Aquí hay un ejemplo que acabo de implementar usando el método Array de asignación de botones, que luego me permite usar selectores de identificación más adelante, tal como se indicó originalmente en la respuesta aceptada, para habilitar / deshabilitar botones e incluso mostrarlos / ocultarlos por completo. haciendo.

$( "#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 estaba deshabilitado de forma predeterminada.

$('#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.


3

Creé una función similar a la que hizo Nick, pero mi método no requeriría configurar dialogClass y podrá obtener los botones de un diálogo específico a través de la identificación (si existe más de uno 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;
} 

Entonces, si creó el diálogo de esta manera:

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

3

Solo para que conste, 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);

3

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>

2

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 Cancelar a Cerrarme)

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

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 esté marcada / desmarcada

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


1

Llamar, .attr("disabled", true)por supuesto, funciona, pero usando jQuery le gustaría hacerlo de una manera más 'azúcar', así que he escrito 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 funciones enable()y disable(), para que pueda hacer su trabajo de esa manera:

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

Que es lo mismo que

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

y

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

1

Esto hizo el trabajo para mí:

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

1

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


1

De acuerdo con la documentación :

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

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

Para poder simplemente seleccionar el botón, puede agregar una propia clase CSS al botón, que debería estar habilitada / deshabilitada.

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

Entonces la habilitación / deshabilitación se vería así:

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

0

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 de esta manera:

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

jQuery replaceCon documentos


0

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"); } }
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.