Comment désactiver un bouton dans une boîte de dialogue jQuery à partir d'une fonction?
J'ai une boîte de dialogue jQuery qui nécessite que l'utilisateur entre certaines informations. Sous cette forme, j'ai un bouton "continuer". Je voudrais que ce bouton "continuer" ne soit activé que lorsque tous les champs ont un contenu, sinon il restera désactivé.
J'ai écrit une fonction qui s'appelle chaque fois qu'un statut de champ a changé. Cependant, je ne sais pas comment activer et désactiver le bouton de dialogue à partir de cette fonction. Que devrais-je faire?
Oups et j'ai oublié de mentionner que ces boutons ont été créés comme suit:
$(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');
}
}
})
});
Vous voudriez définir le propriété désactivée
$('#continueButton').attr("disabled", true);
Mise à jour : Ahha, je vois la complexité maintenant. Le jQuery Dialog avait une seule ligne qui sera utile (dans la section "boutons".
var buttons = $('.selector').dialog('option', 'buttons');
Vous aurez besoin de récupérer la collection de boutons dans la boîte de dialogue, de parcourir celle-ci pour trouver celle dont vous avez besoin, puis de définir l'attribut disabled comme je l'ai montré ci-dessus.
C'est très simple:
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
Vous êtes partout en train de compliquer une tâche simple; La boîte de dialogue jQueryUI a deux façons de définir des boutons pour une raison.
Si vous devez uniquement définir le gestionnaire de clic pour chaque bouton, utilisez l'option qui prend un argument Object. Pour désactiver les boutons et fournir d’autres attributs, utilisez l’option qui prend un argument Array.
L'exemple suivant va désactiver un bouton et mettre à jour son état correctement en appliquant toutes les classes et tous les attributs CSS de jQueryUI.
Étape 1 - Créez votre dialogue avec un Array de boutons:
// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
{
id: "done"
text: "Done",
click: function() { ... }
},
{
id: "cancel"
text: "Cancel",
click: function() { ... }
}
] });
Étape 2 - Activer/désactiver le bouton Terminé une fois la boîte de dialogue créée:
// 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 vous créez une boîte de dialogue fournissant des identifiants pour les boutons,
$("#dialog").dialog({ buttons: [ {
id: "dialogSave",
text: "Save",
click: function() { $(this).dialog("close"); }
},
{
id: "dialogCancel",
text: "Cancel",
click: function() { $(this).dialog("close");
}
}]});
nous pouvons désactiver le bouton avec le code suivant:
$("#dialogSave").button("option", "disabled", true);
Je voulais pouvoir trouver le bouton par son nom (car j'ai plusieurs boutons dans ma boîte de dialogue jQuery UI). J'ai également plusieurs boîtes de dialogue sur la page, j'ai donc besoin d'un moyen d'obtenir les boutons d'une boîte de dialogue spécifique. Voici ma fonction:
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' );
}
Cela désactive un bouton:
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
Vous devez ajouter l'ID de boîte de dialogue si vous avez plusieurs boîtes de dialogue sur une page.
Voici l'exemple de la question modifiée pour désactiver le bouton une fois cliqué:
$(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');
}
}
});
}
De plus, la question suivante sera également utile pour ceci: Comment puis-je désactiver un bouton dans une boîte de dialogue jQuery UI?
Je travaille avec la méthode .dialog("widget") qui retourne la boîte de dialogue DIV elle-même. Si vous êtes dans les méthodes de dialogue:
$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
J'ai trouvé un moyen facile de désactiver (ou d'effectuer toute autre action) un bouton de dialogue.
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
Vous sélectionnez simplement le parent de votre boîte de dialogue et recherchez tous les boutons. Ensuite, en vérifiant le texte de votre bouton, vous pouvez identifier vos boutons.
Du point de vue de la convivialité, il est généralement préférable de laisser le bouton activé, mais d'afficher un message d'erreur si quelqu'un tente de soumettre un formulaire incomplet. Cela me rend fou quand le bouton sur lequel je veux cliquer est désactivé et on ne sait pas pourquoi.
Essaye ça:
$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
haha, vient de trouver une méthode intéressante pour accéder aux fonds
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
Il semble que vous ne sachiez pas qu'il y a un objet événement dans les arguments ...
au fait, il suffit d’accéder au bouton depuis le rappel, dans les cas généraux, il est bon d’ajouter un identifiant d’accès.
Voici ma fonction enableOk pour une boîte de dialogue 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');
}
}
Le bouton "premier" est celui qui se trouve le plus à droite. Vous désactivez le bouton et définissez la classe désactivée de la boîte de dialogue pour obtenir l'effet visuel approprié.
Dans l'ancienne interface utilisateur jQuery (version 1.7.3), je pouvais simplement utiliser
$('.ui-dialog-buttonpane button')[0].disabled=true;
simplement désactiver le bouton sur l'élément DOM lui-même. Maintenant que nous avons mis à niveau la nouvelle version de l'interface utilisateur jQuery (version 1.8.7), cette méthode ne fonctionne plus dans Firefox, mais je peux simplement appeler les fonctions de désactivation et d'activation spécifiques du bouton de l'interface utilisateur de jquery:
$('.ui-dialog-buttonpane button').eq(0).button('disable');
J'ai trouvé une solution de contournement qui peut s'appliquer aux personnes qui tentent de faire quelque chose de similaire. Au lieu de désactiver le bouton, je mets une simple instruction if dans la fonction pour vérifier si la case à cocher a été cochée.
Si ce n'était pas le cas, un simple message indiquait que la case devait être cochée avant la soumission.
Par exemple:
$("#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");
}
}
}
});
Quoi qu'il en soit, j'espère que cela aidera quelqu'un.
Si vous voulez vraiment désactiver un bouton, j’ai trouvé que vous deviez également appeler la méthode .unbind () dessus. Sinon, le bouton peut toujours être actif et un double-clic peut entraîner l'envoi de plusieurs formulaires. Le code suivant fonctionne pour moi:
button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
J'ai créé une fonction jQuery afin de rendre cette tâche un peu plus facile. Ajoutez simplement ceci à votre fichier 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;}
});};
Désactivez le bouton 'OK' dans le dialogue avec la classe 'dialogue':
$('.dialog').dialogButtons('Ok', 'disabled');
Activer tous les boutons:
$('.dialog').dialogButtons('enabled');
Activer le bouton 'Fermer' et changer de couleur:
$('.dialog').dialogButtons('Close', 'enabled').css('color','red');
J'espère que ça aide.
J'ai créé une fonction similaire à celle de Nick, mais ma méthode n'exige pas de paramétrer la classe dialogClass et vous pourrez obtenir les boutons d'une boîte de dialogue spécifique via l'id (s'il en existe plusieurs dans votre application).
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;
}
Donc, si vous avez créé le dialogue comme suit:
$(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');
}
}
});
Vous pouvez obtenir les boutons en procédant comme suit:
var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn = getDialogButton('myDialogBox','Cancel');
Pour désactiver:
addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');
Autoriser:
addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
Pour la petite histoire, ce message m'a aidé à résoudre mon problème. En quelques mots, vous devez définir l'attribut disabled sur disabled et non sur false:
_send_button.attr('disabled','disabled');
Voici à quoi tout le code ressemble, j'ai également ajouté quelques styles pour le rendre désactivé:
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);
Je pense que ça devrait marcher avec tout le monde,
<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>
Voici un exemple que je viens d’implémenter en utilisant la méthode Array d’assignation de boutons, ce qui me permet ensuite d’utiliser des sélecteurs d’identifiant - tout comme la réponse acceptée le disait à l’origine - pour activer/désactiver les boutons et même les afficher/les masquer complètement comme je le fais auparavant. Faire.
$( "#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" );
}
});
Après avoir soumis avec succès, je désactive et masque deux des boutons et active le bouton OK qui était désactivé par défaut.
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
J'espère que cela t'aides.
Malheureusement, aucune des solutions données ici ne fonctionnait pour plusieurs boîtes de dialogue de la page.
De plus, le problème était que la boîte de dialogue d'origine ne contient pas de panneau de boutons en lui-même, mais en est un frère.
Alors je suis venu avec la sélection par ID de dialogue comme ça:
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' );
},
...
puis la même fonction getFirstDialogButton () pourrait être utilisée ultérieurement pour activer un bouton, par exemple. après validation réussie.
J'espère que ça peut aider quelqu'un.
Pour désactiver le bouton Enregistrer dans ma boîte de dialogue, utilisez la ligne suivante dans votre fonction.
$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");
Pour changer un texte dans un bouton, utilisez la ligne suivante (cela change le texte du bouton d'annulation en Close Me)
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
L'appel de .attr("disabled", true) fonctionne bien sûr, mais avec jQuery, vous voudriez le faire de manière plus 'sucre', c'est pourquoi j'ai écrit une simple extension:
(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 );
Maintenant vous avez les fonctions enable() et disable(), vous pouvez donc faire votre travail de la manière suivante:
$('#continueButton').disable();
Qui est pareil que
$('#continueButton').disable(true);
et
$('#continueButton').enable(false);
Dans le monde jQuery, si vous souhaitez sélectionner un objet dans un ensemble d’éléments DOM, vous devez utiliser eq () .
Exemples:
var button = $ ('button'). eq (1);
ou
var button = $ ('bouton: eq (1)');
Selon la documentation :
https://api.jqueryui.com/dialog/#option-buttons
// Setter
$( ".selector" ).button( "option", "disabled", true );
Pour pouvoir simplement sélectionner le bouton, vous pouvez ajouter une classe CSS à ce bouton, qui devrait être activée/désactivée.
// while initializing
$("#dialog").dialog({
...
buttons: [{
disabled: true,
text: "Add to request list",
click: function (e: JQueryEventObject) {
// Some logic
},
"class": "myDialogButton"
}]
...
});
Ensuite, l'activation/désactivation ressemblerait à ceci:
$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);
Cela a fait le travail pour moi:
$find("<%= btnPrint.ClientID %>").set_enabled(true);
@Chris Vous pouvez utiliser les lignes de code suivantes pour activer/désactiver les boutons de dialogue jusqu'à ce que votre case à cocher soit cochée/décochée.
<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");
});
Source originale: http://jsfiddle.net/nick_craver/rxZPv/1/
Pour désactiver un bouton, à l’ouverture de la boîte de dialogue:
$("#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"); } }
});
jQuery Solution fonctionne pour moi.
$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);
Si quelqu'un cherche à remplacer un bouton par quelque chose comme une animation de chargement lorsque vous cliquez dessus (par exemple, lorsqu'un bouton "Soumettre" soumet le formulaire dans la boîte de dialogue), vous pouvez remplacer le bouton par votre image de la manière suivante:
...
buttons: {
"Submit": function(evt) {
$(evt.target).closest('button').replaceWith('<img src="loading.gif">');
}
}
J'avais un bouton que je ne voulais pas afficher jusqu'à un point de déclenchement.
Au début, j'ai essayé ce qui fonctionne: -
$(":button:contains('OK')").hide();
mais laisse une ligne (parce qu'ils sont tous partis!), donc ajouté ceci dans mon CSS: -
.ui-dialog .ui-dialog-buttonpane {
display: none;
}
Cela cache TOUS les boutons.
Je peux réactiver si nécessaire par: -
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button