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

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

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.

Es muy simple:

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

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

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

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

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.

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?

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.

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

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

Prueba esto:

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

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.

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

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

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

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.

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.

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.

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.

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

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

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>

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

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

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

Esto hizo el trabajo para mí:

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

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

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

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

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