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

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

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.

C'est très simple:

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

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

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

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?

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.

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

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.

Essaye ça:

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

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é.

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

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

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

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.

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.

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.

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.

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

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

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>

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

@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/

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

Cela a fait le travail pour moi:

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

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

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

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

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