Comment puis-je désactiver un bouton dans une boîte de dialog jQuery à partir d’une fonction?

Vous souhaitez définir la propriété désactivée

  $('#continueButton').attr("disabled", true); 

Mise à jour : Ahha, je vois la complexité maintenant. Le dialog jQuery comportait une seule ligne qui serait utile (sous la section “boutons”).

  var buttons = $('.selector').dialog('option', 'buttons'); 

Vous devrez obtenir la collection de boutons à partir de la boîte de dialog, la parcourir pour trouver celui dont vous avez besoin, puis définir l’atsortingbut désactivé comme je l’ai montré ci-dessus.

C’est très simple:

 $(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled"); 

Vous êtes complètement compliqué une tâche simple; La boîte de dialog jQueryUI a deux façons de définir les 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 atsortingbuts, utilisez l’option qui prend un argument Array .

L’exemple suivant désactive un bouton et met à jour son état correctement en appliquant tous les atsortingbuts et classes CSS jQueryUI.

Étape 1 – Créez votre boîte de dialog 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 dialog 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); 

Je voulais être en mesure de trouver le bouton par nom (car j’ai plusieurs boutons dans ma boîte de dialog d’interface utilisateur jQuery). J’ai aussi plusieurs boîtes de dialog sur la page, donc j’ai besoin d’un moyen pour obtenir les boutons d’une boîte de dialog 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 une boîte de dialog 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); 

Cela désactive un bouton:

 var firstButton=$('.ui-dialog-buttonpane button:first'); firstButton.addClass('ui-state-disabled'); 

Vous devez append l’ID de dialog si vous avez plusieurs boîtes de dialog 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'); } } }); } 

En outre, la question suivante sera également utile avec ceci: Comment puis-je désactiver un bouton dans une boîte de dialog d’interface utilisateur jQuery?

Je travaille avec la méthode .dialog("widget") qui renvoie la boîte de dialog DIV elle-même. Si vous êtes dans les méthodes de dialog:

 $(this) .dialog("widget") .find("button") .addClass("ui-state-disabled") // for the style .attr("disabled", true); 

Du sharepoint 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 essaie de soumettre un formulaire incomplet. Cela me rend fou quand le bouton sur lequel je veux cliquer est désactivé et que rien ne permet de comprendre pourquoi.

J’ai trouvé un moyen facile de désactiver (ou d’effectuer toute autre action) sur un bouton de dialog.

  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 dialog et trouvez tous les boutons. En cochant ensuite le texte de votre bouton, vous pouvez identifier vos boutons.

Essaye ça:

 $('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable'); 

Voici ma fonction enableOk pour une boîte de dialog 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 “premier” bouton est le plus à droite. Vous désactivez tous les deux le bouton et définissez la classe désactivée de la boîte de dialog 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; 

pour désactiver le bouton sur l’élément DOM lui-même. Maintenant que nous sums passés à la nouvelle interface utilisateur jQuery (version 1.8.7), cette méthode ne fonctionne plus dans Firefox, mais je peux simplement appeler les fonctions spécifiques d’activation et de désactivation du bouton jquery UI sur les objects jquery du bouton:

 $('.ui-dialog-buttonpane button').eq(0).button('disable'); 

haha, vient de trouver une méthode intéressante pour accéder aux bottons

 $("#dialog").dialog({ buttons: { 'Ok': function(e) { $(e.currentTarget).button('disable'); } } }); 

Il semble que vous ne sachiez pas qu’il y a un object événement dans les arguments …

en passant, il accède simplement au bouton depuis le callback, dans les cas généraux, il est bon d’append un identifiant pour l’access

Si vous voulez vraiment désactiver un bouton, j’ai trouvé que vous devez également appeler la méthode .unbind (). Sinon, le bouton peut toujours être actif et un double-clic peut entraîner plusieurs soumissions de formulaire. 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 essayant de faire quelque chose de similaire. Au lieu de désactiver le bouton, j’ai mis une simple instruction if dans la fonction pour vérifier si la case à cocher était cochée.

Si ce n’était pas le cas, il affichait un simple message disant que la boîte devait être vérifié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"); } } } }); 

En tout cas, j’espère que cela aide quelqu’un.

J’ai créé une fonction jQuery pour faciliter cette tâche. 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ésactiver le bouton ‘OK’ dans la boîte de dialog 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 ça aide.

Malheureusement, aucune solution donnée ici n’a fonctionné pour plusieurs boîtes de dialog sur la page.

Le problème était également que la boîte de dialog d’origine ne contenait pas de panneau de boutons en elle-même, mais en était un frère.

Donc, je suis venu avec la sélection par ID de dialog 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 puis la même fonction getFirstDialogButton () pourrait être utilisée ultérieurement pour activer le bouton, par exemple après une 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 d’assignation des boutons Array, qui me permet ensuite d’utiliser des sélecteurs d’ID plus tard – comme indiqué précédemment – pour activer / désactiver les boutons et même les afficher / masquer 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 envoyé avec succès, je désactive et cache 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.

J’ai créé une fonction similaire à celle de Nick, mais ma méthode ne nécessiterait pas de définir dialogClass et vous pourrez obtenir les boutons d’une boîte de dialog 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 

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

 var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list'); var cancelBtn = getDialogButton('myDialogBox','Cancel'); 

 addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled'); cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled'); 

 addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled'); cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');