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

Question

J'ai un jQuery boîte de dialogue qui demande à l'utilisateur d'accéder à certaines informations. Dans ce formulaire, j'ai un bouton "continuer". J'aimerais que ce bouton "continuer" pour ne peut être activé qu'une fois que tous les champs ont contenu en eux, sinon il restera désactivé.

J'ai écrit une fonction qui est appelée chaque fois qu'un champ de statut a changé. Cependant, je ne sais pas comment faire pour activer et désactiver le bouton de boîte de dialogue à partir de cette fonction. Que dois-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');
        }
    }
});

Answer 1

Vous devez définir les handicapés de la propriété

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

Mise à jour: Ahha, je vois la complexité de maintenant. Le jQuery Dialogue avait une seule ligne qui sera de l'utiliser (en vertu de la "boutons".

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

Vous aurez besoin pour obtenir de la collection de boutons de la boîte de dialogue, en boucle que de trouver celle dont vous avez besoin, puis de définir les personnes handicapées de l'attribut comme je l'ai montré ci-dessus.

Answer 2

C'est très simple:

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

Answer 3

Vous êtes tous plus compliquer une tâche simple, les jQueryUI dialogue a deux façons de configurer les boutons pour une raison.

Si vous avez seulement besoin de définir le gestionnaire d'événements click pour chaque bouton, utilisez l'option qui prend un Object argument. Pour la désactivation des boutons et de fournir d'autres attributs, utilisez l'option qui prend un Array argument.

L'exemple suivant permet de désactiver un bouton, et de mettre à jour son état correctement par l'application de tous les jQueryUI CSS de classes et d'attributs.

Étape 1 - Créer votre boîte de dialogue avec un Array des 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 valider après le dialogue est créé:

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

Answer 4

Si vous créez une boîte de dialogue fournissant les id pour les boutons,

Nous pouvons désactiver le bouton avec le code suivant :

Answer 5

Je voulais être en mesure de trouver le bouton nom (puisque j’ai plusieurs boutons dans ma boîte de dialogue jQuery UI). J’ai aussi plusieurs boîtes de dialogue sur la page alors j’ai besoin d’un moyen d’obtenir les boutons d’une boîte de dialogue spécifique. Voici ma fonction :