Comment puis-je désactiver un bouton dans une boîte de dialogue de l'interface utilisateur jQuery?


143

Comment puis-je désactiver un bouton dans la boîte de dialogue de l'interface utilisateur jQuery . Je n'arrive pas à trouver cela dans aucune des documentations dans le lien ci-dessus.

J'ai 2 boutons sur la confirmation modale ("Confirmer" et "Annuler"). Dans certains cas, je souhaite désactiver le bouton "Confirmer".


Voir les réponses dans ce fil: stackoverflow.com/questions/577548/…
Erik

5
@Erik - La situation a un peu changé depuis ces réponses, notamment à cause du .button()plugin, donc ce ne sont plus nécessairement les solutions les meilleures / les plus propres.
Nick Craver

Réponses:


158

Si vous incluez le .button()plugin / widget que jQuery UI contient (si vous avez la bibliothèque complète et que vous êtes sur 1.8+, vous l'avez), vous pouvez l'utiliser pour désactiver le bouton et mettre à jour l'état visuellement, comme ceci:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

Vous pouvez l'essayer ici ... ou si vous utilisez une version plus ancienne ou n'utilisez pas le widget bouton, vous pouvez le désactiver comme ceci:

$(".ui-dialog-buttonpane button:contains('Confirm')").attr("disabled", true)
                                              .addClass("ui-state-disabled");

Si vous le souhaitez dans une boîte de dialogue spécifique, par exemple par ID, procédez comme suit:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

Dans d'autres cas où cela :contains()pourrait donner de faux positifs, vous pouvez utiliser .filter()comme ça, mais c'est exagéré ici puisque vous connaissez vos deux boutons. Si tel est le cas dans d'autres situations, cela ressemblerait à ceci:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

Cela empêcherait :contains()de faire correspondre une sous-chaîne de quelque chose d'autre.


next () ne fonctionnera pas pour moi, car il y a tous les div "redimensionnables" entre la boîte de dialogue et le bouton. J'ai donc utilisé nextAll (), et séparer le buttonPan du bouton:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu

Notez qu'en raison du fait que le volet des boutons n'est pas un enfant du conteneur de boîtes de dialogue, vous pouvez rencontrer des problèmes si votre page définit plusieurs boîtes de dialogue.
Brett Ryan

Excellente solution avec $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");bien que si vous voulez désactiver le bouton d'une fonction que vous avez pour cela, vous devez widgetize ce dialogue et désactiver le bouton après cela; comme ça$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
meridius

3
Notez que si vous ne souhaitez pas interroger le bouton souhaité par son texte, vous pouvez également attribuer une classe au bouton; La boîte de dialogue de jQuery UI prend en charge un tableau avec des objets pour l'option de bouton, chaque objet contenant des informations sur les attributs des boutons.
Dennis

Cela a fonctionné pour moi: $ (this) .closest (". Ui-dialog"). Find ("button: contains ('Save')"). Prop ("disabled", true) .addClass ("ui-state- désactivé");
Adrian P.

217

On dirait que n'importe qui, même dans cette question liée , a proposé cette solution, similaire à la première partie de la réponse donnée par Nick Craver:

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

Ensuite, ailleurs, vous devriez pouvoir utiliser l' API pour le bouton de l'interface utilisateur jquery:

$("#button-ok").button("disable");

15
+1. Je ne sais pas pourquoi cette réponse n'a pas reçu plus de votes. C'est le plus propre que j'ai rencontré et fonctionne bien.
Doug Wilson

38
Cela doit être dans la documentation ... cela ne montre même pas que vous pouvez attribuer un identifiant aux boutons.
Jay K

1
C'est sans aucun doute la meilleure réponse. Il existe d'autres solutions qui le font en recherchant le bouton à l'aide de sélecteurs erronés. Bon travail Nicola!
jnoreiga

4
D'accord: c'est LA solution que je pensais que l'équipe UI devrait implémenter ...: +) Vous pouvez faire encore plus vite:{text:"ok",disabled:true,click: function(){}}
Matthieu

10
C'est bien! Vous pouvez également utiliser "class" au lieu de "id" si vous craignez que l'identifiant soit unique. Cependant, vous devrez taper un peu plus pour rechercher le bouton:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
desm

49

Vous pouvez également utiliser l' attribut non documenté maintenant disabled:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

Pour activer après l'ouverture de la boîte de dialogue, utilisez:

$("#my-button-1").attr('disabled', false);

JsFiddle: http://jsfiddle.net/xvt96e1p/4/


Ce n'est pas que ce soit sans papiers. C'est que lorsque les boutons sont traités, toutes les propriétés de l'objet sont exécutées par rapport à leur propriété jQuery équivalente. Par exemple, vous pouvez ajouter attr: { 'data-value' : 'some value here' }si vous souhaitez ajouter l'attribut data-valueau bouton.
écraser

2
Plus sans papiers. C'est officiel.
Salman A

Cette solution est bien plus élégante que la version la plus populaire. Cela vous permet toute la flexibilité sans le problème des sélecteurs vaguement définis.
KimvdLinde

Notez que l' disabledattribut doit être attribué lors de la création des boutons.
user1032531

J'ai essayé de voter contre, mais j'ai voté pour il y a 4 heures et je ne peux pas le faire. Cette solution ne semble plus fonctionner correctement.
user1032531

7

Ce qui suit fonctionne à partir de la fonction de clic des boutons:

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}

mais alors vous devez cliquer avant qu'il ne soit grisé.
Matt

1

Un bouton est identifié par la classe ui-button. Pour désactiver un bouton:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

Sauf si vous créez dynamiquement la boîte de dialogue (ce qui est possible), vous connaîtrez la position du bouton. Donc, pour désactiver le premier bouton:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

La ui-state-disabledclasse est ce qui donne à un bouton ce joli style grisé.


1

J'ai créé une fonction jQuery afin de rendre cette tâche un peu plus facile. Il y a probablement maintenant une meilleure solution ... de toute façon, voici mes 2 cents. :)

Ajoutez simplement ceci à votre fichier JS:

$.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 le dialogue avec la classe 'dialog':

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

Activer tous les boutons:

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

Activez le bouton 'Fermer' et changez la couleur:

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

Texte sur tous les boutons en rouge:

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

J'espère que cela t'aides :)


1
function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}

1

Vous pouvez écraser le tableau de boutons et ne laisser que ceux dont vous avez besoin.

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

1

ce code désactive le bouton avec 'YOUR_BUTTON_LABEL'. vous pouvez remplacer le nom dans contains (). désactiver

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");

remplacez "YOUR_BUTTON_LABEL" par le libellé de votre bouton. autoriser

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

0

Vous pouvez faire ceci pour désactiver le premier bouton par exemple:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

0

La façon dont je le fais est Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

C'est le moyen le plus court et le plus simple que j'ai trouvé.


0

Si vous utilisez KO, alors c'est encore plus propre. Imaginez que vous avez ce qui suit:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

La magie vient de la source de l'interface utilisateur jQuery :

$( "<button></button>", props )

Vous pouvez appeler N'IMPORTE QUELLE fonction d'instance jQuery en la passant par l'objet bouton.

Par exemple, si vous souhaitez utiliser HTML:

{ html: '<span class="fa fa-user"></span>User' }

Ou, si vous souhaitez ajouter une classe au bouton (vous pouvez le faire de plusieurs manières):

{ addClass: 'my-custom-button-class' }

Peut-être que vous êtes fou et que vous souhaitez supprimer le bouton du dom lorsqu'il est survolé:

{ mouseover: function () { $(this).remove(); } }

Je suis vraiment surpris que personne ne semble avoir mentionné cela dans le nombre incalculable de fils comme celui-ci ...


0

Cela a fonctionné pour moi -

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 

0

Vous pouvez désactiver un bouton lorsque vous créez la boîte de dialogue:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

Ou vous pouvez le désactiver à tout moment après la création de la boîte de dialogue:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>

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.