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


237

J'ai une boîte de dialogue jQuery qui demande à l'utilisateur d'entrer 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 contiennent du contenu, sinon il restera désactivé.

J'ai écrit une fonction qui est appelée chaque fois qu'un statut de champ change. Cependant, je ne sais pas comment activer et désactiver le bouton de dialogue 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');
      }
    }
  })
});

Il y a une bonne réponse à: stackoverflow.com/questions/3646408/…
Amir

3
J'ai fait des recherches assez approfondies et j'ai découvert que la solution la plus propre est de loin décrite dans le lien suivant: stackoverflow.com/a/4279852

Réponses:


260

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

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

Mise à jour : Ahha, je vois la complexité maintenant. La boîte de dialogue jQuery avait une seule ligne qui sera utile (sous la section "boutons".

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

Vous devrez récupérer la collection de boutons dans la boîte de dialogue, parcourir cette dernière pour trouver celle dont vous avez besoin, puis définir l'attribut désactivé comme je l'ai montré ci-dessus.


Malheureusement, la boîte de dialogue JQuery ne facilite pas la tâche, vous devrez donc y travailler un peu.
Tom Ritter

Oui, mais l'option boutons ne retourne pas les éléments DOM mais les fonctions - itérer à travers eux est très bien, mais désactiver un n'est pas si simple. Est-ce que j'ai râté quelque chose?
Remi Despres-Smyth

1
Vous devez contourner cette méthode pour désactiver les boutons. Utilisez jQuery-foo pour retirer les éléments dom résultants de la page.
Stefan Kendall

36
D'accord - alors pourquoi est-ce la réponse choisie? -1 pour incomplet.
Remi Despres-Smyth

22
Je crois que .prop('disabled', true)c'est préféré dans jQuery 1.6+
Molomby

191

C'est très simple:

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

4
J'aime cette solution, mais elle devrait vraiment se lire: $ (": button: contains ('Authenticate')"). Attr ("disabled", "disabled"). AddClass ('ui-state-disabled'); (l'addClass manquait)
Eric Asberry

4
S'il y a plusieurs boîtes de dialogue, vous devez définir la boîte de dialogue que vous devez modifier: $ ("# dialogId"). Parent (). $ (": Bouton: contient ('Authentifier')"). Attr ("désactivé", " désactivé "). addClass ('ui-state-disabled');
podeig

5
+1: C'est de loin la meilleure réponse ... La réponse acceptée ne répond à rien, suggère simplement une approche impérative - ce qui est lourd en fait: nous n'avons pas besoin de parcourir quoi que ce soit, jquery peut le faire pour nous.
rsenna

1
J'ai trouvé que cela fonctionnait aussi car les boutons de la boîte de dialogue jQueryUI sont des boutons jQueryUI: $ ("# dialogID"). Parent (). Find (": button: contient ('Authenticate')"). Button ("disable") ;
écrit le

12
Je crois que .prop('disabled', true)c'est préféré dans jQuery 1.6+
Molomby

38

Vous compliquez partout une tâche simple; la boîte de dialogue jQueryUI a deux façons de définir des boutons pour une raison.

Si vous avez seulement besoin de définir le gestionnaire de clics pour chaque bouton, utilisez l'option qui prend un Objectargument. Pour désactiver les boutons et fournir d'autres attributs, utilisez l'option qui prend un Arrayargument.

L'exemple suivant désactivera un bouton et mettra à jour son état correctement en appliquant toutes les classes et attributs CSS jQueryUI.

Étape 1 - Créez votre boîte de dialogue avec l'un Arraydes 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 - Activez / désactivez le bouton Terminé 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);

2
Bonne idée, mais la eachboucle n'est pas nécessaire. Spécifiez un classattribut dans le buttonstableau et vous pouvez l'utiliser pour trouver le bon élément.
cdmckay

comme l'a dit cdmackay, vous n'avez pas besoin de boucler. Dans votre exemple ci-dessus, vous pouvez simplement aller de l'avant et utiliser un sélecteur jQuery: var $ doneButton = $ ("# done");
Rob

Lorsque j'essaie de créer les boutons à l'aide de la méthode ci-dessus (à la manière du tableau), les boutons s'affichent comme «1» et «0» et non comme «Terminé» et «Annuler». Pourquoi cela arrive-t-il? Le texte n'est pas affiché dans le bouton et la fonction de clic n'est pas non plus déclenchée.
Harke

1
Cela fonctionne pour moi et vous n'avez pas besoin de la boucle. Définissez l'id puis accédez à l'élément: this.myDialog.dialog ("option", "boutons", [{id: "addAdapterFormOkButton", texte: "OK", cliquez sur: function () {}}]) Ensuite, vous avez juste besoin pour y accéder avec le sélecteur comme ils disent tous ci-dessus: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ('ui-state-disabled'); okButt.attr ('désactivé', vrai);
Gurnard

32

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

7
je vous ai donné +1 mais je pense qu'il vaut mieux utiliser la méthode au lieu de la propriété du bouton comme: $ ("# dialogSave"). button ("disable");
Fareed Alnamrouti

1
Ha! De loin le plus simple! Mais utilisez la méthode comme le dit le tarif.
PapillonUK

29

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

Belle solution. Je mentionnerais dans la solution, cependant, que le volet des boutons n'est pas un enfant de la boîte de dialogue - la clé définit une boîte de dialogue unique et l'utilise pour le sélecteur. Cela m'a eu quand je l'ai regardé.
Remi Despres-Smyth

Il est intéressant de noter que le texte du bouton est défini par la clé de l'objet boutons. Semble être limité au moment où vous n'avez pas besoin de définir l'attribut. Sinon, la version du tableau est meilleure, où le texte est défini explicitement par bouton.
Gerard ONeill

19

Cela désactive un bouton:

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

Vous devez ajouter l'ID de la boîte de dialogue si vous avez plusieurs boîtes de dialogue sur une page.


11

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 dialogue jQuery UI?


9

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

Vous sélectionnez simplement le parent de votre boîte de dialogue et trouvez tous les boutons. Ensuite, en vérifiant le texte de votre bouton, vous pouvez identifier vos boutons.


9

J'ai obtenu ce travail avec la méthode .dialog("widget")qui renvoie 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);

8

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. Cela me rend fou lorsque le bouton sur lequel je veux cliquer est désactivé et il n'y a aucune idée de pourquoi.


6

Essaye ça:

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

5

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 "premier" bouton est 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é.


Remarque, cela suppose que vous n'avez qu'une seule boîte de dialogue sur la page. J'ai depuis écrit une fonction pour récupérer n'importe quel bouton par son nom dans n'importe quelle boîte de dialogue de la page pour y faire face.
Remi Despres-Smyth

5

Dans l'héritage jQuery UI (version 1.7.3), j'ai pu simplement utiliser

$('.ui-dialog-buttonpane button')[0].disabled=true;

pour désactiver simplement le bouton sur l'élément DOM lui-même. Maintenant que nous avons mis à niveau vers 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 de désactivation et d'activation du bouton jquery UI sur les objets jquery du bouton:

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

5

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 savez pas tous qu'il y a un objet événement dans les arguments ...

par ailleurs, il accède simplement au bouton depuis le rappel, dans les cas généraux, il est bon d'ajouter un identifiant d'accès


1
Je ne pense pas que cela fonctionnera. Il ne désactivera le bouton que lorsque le bouton Ok sera bi-cliqué.
Jean-François Beauchamp

J'ai dû désactiver un bouton OK dans une boîte de dialogue jusqu'à ce que le traitement soit terminé. Cela a parfaitement fonctionné.
CodingYoshi

4

Si vous voulez vraiment désactiver un bouton, j'ai constaté que vous devez également appeler la méthode .unbind () dessus. Sinon, le bouton peut toujours être actif et un double-clic peut conduire à plusieurs soumissions de formulaire. Le code suivant fonctionne pour moi:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

4

J'ai trouvé une solution de contournement qui pourrait s'appliquer aux personnes essayant de faire quelque chose de similaire. Au lieu de désactiver le bouton, j'ai mis une simple ifdéclaration dans la fonction pour vérifier si la case à cocher était cochée.

Si ce n'est pas le cas, il affiche un message simple indiquant que la case doit ê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 aide quelqu'un.


4

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 la boîte de dialogue avec la classe 'boîte de dialogue':

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

Activez tous les boutons:

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

Activez le bouton «Fermer» et changez de couleur:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

J'espère que ça aide.


3

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

Le problème était également que la boîte de dialogue d'origine ne contient pas de volet de boutons en soi, mais en est un frère.

Je suis donc 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 plus tard pour activer le bouton, par exemple après une validation réussie.

J'espère que cela peut aider quelqu'un.


3

Voici un exemple que je viens d'implémenter en utilisant la méthode Array d'attribution de boutons, qui me permet ensuite d'utiliser des sélecteurs d'ID plus tard - tout comme la réponse acceptée l'a déclaré à l'origine - pour activer / désactiver les boutons et même les afficher / masquer complètement comme je le suis 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 j'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.


3

J'ai créé une fonction similaire à ce que Nick a fait, mais ma méthode ne nécessiterait pas de définir la boîte de dialogue 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éé la boîte de 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 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');

3

Pour mémoire, ce message m'a aidé à résoudre mon problème. En bref, vous devez définir l'attribut désactivé sur désactivé, pas sur faux:

_send_button.attr('disabled','disabled');

Voici à quoi ressemble tout le code, 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);

3

Je pense que cela devrait fonctionner 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>

2

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 modifier un texte dans un bouton, utilisez la ligne suivante (cela change le texte du bouton Annuler en Me fermer)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

1

@Chris Vous pouvez utiliser les lignes de code suivantes pour activer / désactiver les boutons de dialogue jusqu'à ce que votre case 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 d'origine: http://jsfiddle.net/nick_craver/rxZPv/1/


1

L'appel .attr("disabled", true)fonctionne bien sûr, mais en utilisant jQuery vous aimeriez le faire de manière plus «sucrée», j'ai donc écrit une extension simple:

(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 );

Vous avez maintenant des fonctions enable()et disable()vous pouvez donc faire votre travail de cette façon:

$('#continueButton').disable();

Qui est le même que

$('#continueButton').disable(true);

et

$('#continueButton').enable(false);

1

Cela a fait le travail pour moi:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

1

Dans le monde jQuery, si vous souhaitez sélectionner un objet dans un ensemble d'éléments DOM, vous devez utiliser eq () .

Exemples:

bouton var = $ ('bouton'). eq (1);

ou

bouton var = $ ('bouton: eq (1)');


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 propre classe CSS au bouton, qui doit ê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);

0

Si quelqu'un cherche à remplacer un bouton par quelque chose comme une animation de chargement lorsqu'il est cliqué (par exemple lorsqu'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">');
    }
}

jQuery replaceWith docs


0

Pour désactiver un bouton, dans la boîte de dialogue ouverte:

$("#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"); } }
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.