cómo desactivar los botones de diálogo de jquery

Question

Necesito: Estoy usando un diálogo modal jquery. Tengo algunos botones en él. Quiero desactivar un botón cuando se abre el cuadro de diálogo, pero quiero habilitarlo después de alguna operación específica.

Lo que hice: Puedo inhabilitar el botón agregando esta declaración jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

Problema: Pero ahora lo que quiero es que cuando se haga clic en el botón editar, realice alguna acción; después de realizar esa acción, el botón 'Emitir' se activará.

Mi código está por debajo.

jQuery(newdiv).dialog({ 
    width:500, 
    height:275, 
    dialogClass:'alert', 
    modal: true, 
    close: function(event, ui) { jQuery(newdiv).html(''); }, 
    buttons: { 
     "issue":function() 
     { 

     }, 
     "Edit":function() 
     { 
      //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement 
      jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default'); 
     }, 
     "Cancel":function(){jQuery(this).dialog('close');}, 
    } 
}); 
jQuery(".ui-dialog-titlebar").hide(); 
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'}); 
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled"); 

Answer 1

No hay necesidad de perder el tiempo con las clases de los botones y probablemente tampoco sea una buena idea. Los botones en un cuadro de diálogo jQuery-UI son jQuery-UI buttons y apoyan disable y enable métodos en el estilo habitual jQuery-UI:

$button.button('enable'); // Enable the button 
$button.button('disable'); // Disable the button 

En primer lugar, sustituir este:

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

Con esta :

jQuery('.ui-dialog button:nth-child(1)').button('disable'); 

Luego, en el controlador de edición, haga lo siguiente:

jQuery('.ui-dialog button:nth-child(1)').button('enable'); 

para activar el botón.

En cuanto a los selectores, el cuadro de diálogo principal <div> tiene una clase ui-dialog, así que comenzamos con .ui-dialog. Entonces, queremos los botones dentro del diálogo, así que estamos buscando elementos <button>; esto nos da .ui-dialog button. Los botones del cuadro de diálogo se enumeran de izquierda a derecha en el mismo orden que en la opción buttons del cuadro de diálogo.Hay varias maneras de conseguir el primer botón:

• :first-child
• :first
• :nth-child

Fui con :nth-child que es un selector CSS3:

El :nth-child(an+b) seudo la notación de clase representa un elemento que h como an+b-1 hermanos antes de en el árbol de documentos, para cualquier entero positivo o valor cero de n, y tiene un elemento principal.

So button:nth-child(1) es el primer botón. Pensé que si estuvieras haciendo cosas con un botón, probablemente terminarías haciendo cosas con otros botones, así que, por ejemplo, podrías hacer .ui-dialog button:nth-child(2) para obtener el botón "Editar" y eso se alinearía muy bien con el selector utilizado para el botón "Emitir".

Answer 2

Se podría hacer:

"Edit":function() 
    { 
     //perform other actions 
     jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default'); 
    }, 

Recuerde, un elemento de entrada con el atributo deshabilitado está siempre desactivado, cualquier valor que establece el atributo en: $('input').attr('disabled', false) es igual a $('input').attr('disabled', 'disabled')

Answer 3

"Edit":function() 
     { 
     jQuery(".ui-dialog-buttonpane button:contains('Issue')") 
      .removeAttr("disabled") 
      .removeClass("ui-state-disabled") 
      .addClass('ui-state-default'); 

     } 

Answer 4

si tiene otro cuadro de diálogo en el contexto, de esta manera jQuery('.ui-dialog button:nth-child(1)').button('disable'); puede causar algún problema.

hay unos pasos para mejorar esta: primero: encontrar el identificador de diálogo

$mydialog = $("#divfordialog"); 

segundo: encontrar el panel de botones

$buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane"); 

tercero: encontrar el botón de destino, asumir el botón de nombre es BTN

$buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")'); 

último: manejarlo (por ejemplo: deshabilitarlo, habilitarlo);

$buttonwanttocontrol.button("disable"); 
$buttonwanttocontrol.button("enable"); 

offently, queremos init nuestro estado del botón de diálogo cuando se abre, esto funcionará hallazgo:

$("divfordialog").dialog({ 
    ... 
    buttons : { 
     ... 
     "BTN" : function() {}, 
     ... 
    }, 
    open : function() { 
     if (shouldDisableBtn()) { 
      $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable") 
     } 
    } 
    ... 
});