Comment puis-je désactiver un bouton sur une boîte de dialogue jQuery UI?
comment désactiver un bouton dans la boîte de dialogue de jQuery UI . Je n'arrive pas à trouver cela dans la documentation du lien ci-dessus.
j'ai 2 boutons sur la confirmation modale ("Confirmer "et"annuler"). Dans certains cas, je veux désactiver le bouton "Confirmer".
14 réponses
si vous incluez le .button()
plugin / widget que jQuery UI contient (Si vous avez la bibliothèque complète et ê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 êtes sur une ancienne version ou si vous 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 voulez dans un dialogue spécifique, dites par ID, puis faites ceci:
$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
.attr("disabled", true);
dans d'autres cas où :contains()
pourrait donner des faux positifs alors vous pouvez utiliser .filter()
comme ceci, mais c'est exagéré ici car vous connaissez vos deux boutons. si c'est le cas dans d'autres situations, il ressemblerait à ceci:
$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
return $(this).text() == "Confirm";
}).attr("disabled", true);
cela empêcherait :contains()
de correspondre à une sous-couche de quelque chose d'autre.
ressemble à n'importe qui, même dans cette question liée , ont proposé cette solution, semblable à 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 être en mesure d'utiliser le API pour le bouton UI jquery:
$("#button-ok").button("disable");
vous pouvez également utiliser le Non 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 dialogue, utilisez:
$("#my-button-1").attr('disabled', false);
JsFiddle: http://jsfiddle.net/xvt96e1p/4 /
les œuvres suivantes de l'intérieur de la fonction de clic de 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');
}
}
});
}
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 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);
la classe ui-state-disabled
est ce qui donne un bouton que le style atténué agréable.
j'ai créé une fonction jQuery afin de rendre cette tâche un peu plus facile. Probablement maintenant il y a une meilleure solution... dans tous les cas, voici mes 2cents. :)
il suffit d'ajouter 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');
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');
Espérons que cela aide :)
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' );
}
}
vous pouvez écraser le tableau des boutons et ne laisser que ceux dont vous avez besoin.
$( ".selector" ).dialog( "option", "buttons", [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] );
ce code désactive le bouton avec "YOUR_BUTTON_LABEL". vous pouvez remplacer le nom contient(). à désactiver
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");
remplacer "YOUR_BUTTON_LABEL" par l'étiquette de votre bouton. pour activer
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");
vous pouvez faire ceci pour désactiver le premier bouton par exemple:
$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
La façon dont je le fais, c'est
Cancel: function(e) {
$(e.target).attr( "disabled","disabled" );
}
C'est le chemin le plus court et le plus facile que j'ai trouvé.
si vous utilisez knockout, alors ceci encore plus propre. Imaginez que vous ayez 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 du jQuery UI source :
$( "<button></button>", props )
vous pouvez essentiellement appeler N'importe quelle fonction d'instance de jQuery en la passant par l'objet bouton.
par exemple, si vous voulez utiliser HTML:
{ html: '<span class="fa fa-user"></span>User' }
Ou, si vous voulez ajouter une classe au bouton (vous pouvez le faire de multiples façons):
{ addClass: 'my-custom-button-class' }
peut-être que vous êtes fou, et que vous voulez enlever le bouton du dom quand il est en vol stationnaire:
{ mouseover: function () { $(this).remove(); } }
je suis vraiment surpris que personne ne semble avoir mentionné cela dans le nombre incalculable de fils comme celui-ci...
ça a marché 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" );
}
}
});
}
});
}
}
});
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 du 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>