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

¿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”.

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.

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

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/

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

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.

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 🙂

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

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

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

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

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

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

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

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. 
     
Submit button is disabled at initialization.

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

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("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"); 
   

Proceed?