¿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 on the jQuery UI dialog? 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

Si está incluida la .button() plugin/widget que contiene jQuery UI (si tiene la biblioteca completa y está en 1.8+, lo tienes), que se puede utilizar para deshabilitar el botón y actualización del estado visual, así:

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

You can give it a try here ... o si estás en una versión más antigua o no usar el aparato de botón, puede deshabilitarlo como esto:

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

---

Si desea que dentro de un diálogo específico, digamos por ID, a continuación, haga lo siguiente:

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

En otros casos en los que :contains() podría dar falsos positivos, puede utilizar .filter() así, pero es excesivo aquí ya que conoces tus dos botones. Si que 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 :contains() de la concordancia de una subcadena de otra cosa.

Answer 2

Un botón se identifica por la clase ui-button. Para desactivar un botón:

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

menos que esté creando dinámicamente el cuadro de diálogo (que es posible), usted sabrá la posición del botón. Por lo tanto, para desactivar el primer botón:

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

El ui-state-disabled clase es lo que le da un botón que agradable estilo de atenuada.

Answer 3

Usted podría hacer esto para desactivar el primer botón, por ejemplo:

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

Answer 4

Creé una función jQuery para hacer esta tarea un poco más fácil. Probablemente ahora hay una mejor solución ... de cualquier forma, aquí están mis 2cents.:)

Sólo añadir 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;} 
});}; 

botón Desactivar 'OK' en diálogo con 'diálogo' clase:

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

permitir a todos los botones:

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

Habilitar el botón 'Cerrar' y cambiar 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 5

Parece que nadie, ni siquiera en this linked question, han 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 otro lugar, usted debe ser capaz de utilizar el API para el botón de jQuery UI:

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

Answer 6

Las siguientes obras desde el interior de los botones de función de clic:

$(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 7

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

Answer 8

puede sobrescribir la matriz botones e izquierda sólo los que necesita.

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

Answer 9

Usted puede también utilizar el no ahora documentado disabled atributo:

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

    }] 
}); 

Para activar después de diálogo se ha abierto, el uso:

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

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

Answer 10

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

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

Answer 11

Si está utilizando el knockout, este es incluso más limpio. Imagine que tiene la 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 viene de la jQuery UI source:

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

Básicamente puede llamar a cualquier función jQuery ejemplo haciéndolo pasar por el objeto de botón.

Por ejemplo, si desea utilizar HTML:

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

O, si desea agregar una clase al botón (se puede hacer esto varias maneras):

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

Tal vez estás loco, y que desea eliminar el botón de la dom cuando se cernió:

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

---

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

Answer 12

Este código desactiva el botón con 'YOUR_BUTTON_LABEL'. puedes reemplazar el nombre en contains(). para desactivar

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

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

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

Answer 13

Puede deshabilitar un botón cuando se 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 se puede desactivar en cualquier momento después de crear 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 14

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