web-dev-qa-db-fra.com

Comment puis-je désactiver un bouton dans une boîte de dialogue jQuery UI?

Comment procéder pour désactiver un bouton dans la boîte de dialogue de l'interface utilisateur de jQuery . Je n'arrive pas à trouver cela dans la documentation mentionnée ci-dessus.

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

jqueryjquery-uijquery-ui-dialog
141
leora

Si vous incluez le .button() plugin/widget que contient l'interface utilisateur jQuery (si vous avez la bibliothèque complète et que vous êtes sur la version 1.8 ou supérieure, vous l'avez), vous pouvez l'utiliser pour désactiver le bouton et mettre à jour l'état de manière visuelle, comme ceci:

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

Vous pouvez l'essayer ici ... ou si vous utilisez une version plus ancienne ou si vous n'utilisez pas le widget de 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 un dialogue spécifique, dites par ID, procédez comme suit:

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

Dans les autres cas où :contains() peut donner de faux positifs, vous pouvez utiliser .filter() comme ceci, mais c'est exagéré ici puisque vous savez vos deux boutons. Si c'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.

156
Nick Craver

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 le API pour le bouton jquery UI:

$("#button-ok").button("disable");
206
Nicola Tuveri

Vous pouvez également utiliser le ne pas maintenant documenté disabled attribut:

$("#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/

48
Jérôme

Les fonctions suivantes fonctionnent dans 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');
            }
        }
    });
}
7
Chris Pietschmann

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

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ésactivez le bouton 'Ok' dans le dialogue avec la classe 'dialogue':

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

Texte sur tous les boutons rouge:

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

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

1
sergiodlopes
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
Ronny Sherer

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
jfredys

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

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

Si vous ne créez pas dynamiquement le 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);

Le ui-state-disabled La classe est ce qui donne à un bouton ce joli style atténué.

1
Chris Laplante

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

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

remplacez 'YOUR_BUTTON_LABEL' par l'étiquette de votre bouton. pour activer

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

Si vous utilisez KO, alors cela encore plus propre. Imaginez que vous ayez:

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 du source de l'interface utilisateur jQuery :

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

En gros, vous pouvez appeler N'IMPORTE QUELLE fonction d'instance jQuery en la passant à travers l'objet button.

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 façons):

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

Peut-être que vous êtes cinglé et que vous voulez retirer le bouton du dom lorsqu'il est survolé:

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

Je suis vraiment surpris que personne ne semble l'avoir mentionné dans les innombrables discussions comme celle-ci ...

0
crush

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
Pramod Kumar

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
Bhavin

Vous pouvez désactiver un bouton lorsque vous construisez 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>
0
Salman A

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

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