Comment puis-je désactiver un bouton dans une boîte de dialogue jQuery à partir d'une fonction?
j'ai un dialogue jQuery qui demande à l'utilisateur de saisir certaines informations. Dans ce formulaire, j'ai un bouton "continuer". Je voudrais que ce bouton" continuer " ne soit activé qu'une fois que tous les champs ont du contenu, sinon il restera désactivé.
j'ai écrit une fonction appelée everytime a field status changed. Cependant, je ne sais pas comment activer et désactiver le bouton dialog à partir de cette fonction. Que dois-je faire?
Oops 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');
}
}
})
});
30 réponses
vous voudriez mettre le propriété handicapée
$('#continueButton').attr("disabled", true);
Update : Ahha, je vois la complexité maintenant. La boîte de dialogue jQuery avait une seule ligne qui serait utile (sous la section "boutons").
var buttons = $('.selector').dialog('option', 'buttons');
vous aurez besoin d'obtenir la collection de boutons de la boîte de dialogue, boucle à travers cela pour trouver celui dont vous avez besoin, et puis Définir l'attribut désactivé comme I montré ci-dessus.
c'est très simple:
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
vous compliquez une tâche simple; la boîte de dialogue jQueryUI a deux façons de régler les boutons pour une raison.
si vous avez seulement besoin de 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 tous les jQueryUI CSS de classes et d'attributs.
É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 fait après la création de la boîte de dialogue:
// 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);
je voulais pouvoir trouver le bouton par son nom (puisque j'ai plusieurs boutons dans ma boîte de dialogue jQuery UI). J'ai aussi plusieurs dialogues sur la page donc j'ai besoin d'un moyen d'obtenir les boutons d'un 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' );
}
si vous créez un dialogue fournissant des id 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);
Cette option permet de désactiver un bouton:
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
vous devez ajouter l'id de dialogue si vous avez plusieurs dialogues sur une page.
voici l'échantillon de la question modifié 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');
}
}
});
}
Aussi, la question suivante sera également utile avec ce: comment désactiver un bouton sur une boîte de dialogue jQuery UI?
j'ai obtenu ce travail avec la méthode .dialog("widget") qui renvoie le dialogue DIV lui-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);
du point de vue de l'utilisabilité, il est généralement préférable de laisser le bouton activé, mais d'afficher un message d'erreur si quelqu'un essaie de soumettre un formulaire incomplet. Il me rend fou quand le bouton que je veux cliquer est désactivé et il n'y a aucune idée de pourquoi.
j'ai trouvé un moyen facile de désactiver (ou d'effectuer toute autre action) sur un bouton de dialogue.
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
il vous suffit de sélectionner le parent de votre boîte de dialogue et de trouver tous les boutons. Ensuite, vérifier le Texte de votre bouton, vous pouvez identifier vos boutons.
essayez ceci:
$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
voici ma fonction enablok pour un 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');
}
}
La "première" bouton est celui le plus à droite. Vous désactivez à la fois le bouton et définissez la classe désactivée du dialogue, pour l'effet visuel approprié.
dans le jQuery UI legacy (version 1.7.3) j'ai pu simplement utiliser
$('.ui-dialog-buttonpane button')[0].disabled=true;
pour juste désactiver le bouton sur L'élément DOM lui-même. Maintenant que nous sommes passés à la nouvelle interface utilisateur jQuery (version 1.8.7), cette méthode ne fonctionne plus dans Firefox, mais je peux simplement appeler le bouton spécifique de L'interface utilisateur jQuery disable et activer les fonctions sur le bouton objets jquery:
$('.ui-dialog-buttonpane button').eq(0).button('disable');
haha, vient de trouver une méthode intéressante pour accéder aux boutons
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
il semble que vous ne sachiez pas qu'il y a un objet event dans les arguments...
par la manière, juste accède au bouton de rappel, dans le cas général, il est bon d'ajouter un code d'accès
si vous voulez vraiment désactiver un bouton, j'ai trouvé que vous devez aussi appeler le .méthode unbind () dessus. Dans le cas contraire, le bouton peut toujours être actif, et un double-clic peut conduire à des soumissions de formulaires multiples. Le code suivant fonctionne pour moi:
button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
j'ai trouvé une solution de contournement qui peut s'appliquer aux personnes qui essaient de faire quelque chose de similaire. Au lieu de désactiver le bouton, j'ai mis une simple déclaration if dans la fonction pour vérifier si la case à cocher était cochée.
si ce n'était pas le cas, il affichait un message simple disant que la case devait être cochée avant d'être soumise.
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");
}
}
}
});
de toute façon, j'espère que ça aidera quelqu'un.
j'ai créé une fonction jQuery afin de rendre cette tâche un peu plus facile. Il suffit d'ajouter 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;}
});};
bouton de désactivation "OK" dans la boîte de dialogue avec la classe "dialog":
$('.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 cela aidera.
malheureusement pas de solutions de données ici travaillé pour plusieurs dialogues sur la page.
aussi le problème était que la boîte de dialogue originale ne contient pas le panneau de bouton en lui-même, mais est un frère de celui-ci.
alors j'ai choisi par dialogue ID 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' );
},
...
et ensuite la même fonction getFirstDialogButton() pourrait être utilisée plus tard pour activer le bouton, par exemple après validation réussie.
J'espère que ça peut aider quelqu'un.
voici un exemple que je viens d'implémenter en utilisant la méthode de tableau d'assignation des boutons, qui me permet ensuite d'utiliser des sélecteurs d'id plus tard - tout comme la réponse acceptée indiquée à l'origine - pour activer/désactiver les boutons et même les montrer/les cacher complètement comme je le fais.
$( "#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 Cache deux des boutons et j'active le bouton OK qui a été 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 aider.
j'ai créé une fonction similaire à ce que Nick a fait, mais ma méthode ne nécessiterait pas de définir la classe de dialogue et vous serez en mesure d'obtenir les boutons d'une boîte de dialogue spécifique via l'id (si plus d'un existe 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 ceci:
$(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 faisant ce qui 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');
pour activer:
addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
Juste pour le record, ce post m'a aidé à résoudre mon problème. En bref, vous devez définir l'attribut disabled à disabled, pas à false:
_send_button.attr('disabled','disabled');
voici à quoi ressemble tout le code, j'ai aussi ajouté quelques styles pour le rendre invalide:
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 qu'il devrait travailler avec tous,
<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>
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( ce changement le texte du bouton d'annulation pour me fermer)
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
@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/non 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 /
appeler .attr("disabled", true) bien sûr, mais en utilisant jQuery vous aimeriez le faire de façon plus "sugar", donc j'ai écrit 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 des fonctions enable() et disable() , donc vous pouvez faire votre travail de cette façon:
$('#continueButton').disable();
qui est identique à
$('#continueButton').disable(true);
et
$('#continueButton').enable(false);
Cela fait le travail pour moi:
$find("<%= btnPrint.ClientID %>").set_enabled(true);
si quelqu'un cherche à remplacer un bouton par quelque chose comme une animation de chargement lorsqu'il clique (par exemple quand un bouton "Soumettre" soumet le formulaire dans la boîte de dialogue) - vous pouvez remplacer le bouton par votre image comme ceci:
...
buttons: {
"Submit": function(evt) {
$(evt.target).closest('button').replaceWith('<img src="loading.gif">');
}
}
pour désactiver un bouton, à Dialogue ouvert:
$("#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"); } }
});
j'avais un bouton que je ne voulais pas voir affiché avant un point de déclenchement.
j'ai d'abord essayé ce qui fonctionne: -
$(":button:contains('OK')").hide();
mais laisse une ligne (car ils ont tous disparu!), donc ajouté ceci à la place dans mon CSS: -
.ui-dialog .ui-dialog-buttonpane {
display: none;
}
ça cache tous les boutons.
je peux réactiver lorsque nécessaire par: -
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button