How do I go about disabling a button on the jQuery UI dialog. I can't seem to find this in any of the documentation in the link above.
I have 2 buttons on the modal confirmation ("Confirm" and "Cancel"). In certain cases, I want to disable the "Confirm" button.
This question is related to
jquery
jquery-ui
jquery-ui-dialog
This worked for me --
$("#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" );
}
}
});
}
});
}
}
});
The way I do it is
Cancel: function(e) {
$(e.target).attr( "disabled","disabled" );
}
This is the shortest and easiest way I found.
A button is identified by the class ui-button
. To disable a button:
$("#myButton").addClass("ui-state-disabled").attr("disabled", true);
Unless you are dynamically creating the dialog (which is possible), you will know the position of the button. So, to disable the first button:
$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);
The ui-state-disabled
class is what gives a button that nice dimmed style.
If you're using knockout, then this even cleaner. Imagine you have the following:
var dialog = $('#my-dialog').dialog({_x000D_
width: '100%',_x000D_
buttons: [_x000D_
{ text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },_x000D_
{ text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }_x000D_
]_x000D_
});_x000D_
_x000D_
function ViewModel(dialog) {_x000D_
var self = this;_x000D_
_x000D_
this.items = ko.observableArray([]);_x000D_
_x000D_
this.onSubmitClicked = function () {_x000D_
dialog.dialog('option', 'title', 'On Submit Clicked!');_x000D_
};_x000D_
_x000D_
this.onEnableSubmitClicked = function () {_x000D_
dialog.dialog('option', 'title', 'Submit Button Enabled!');_x000D_
self.items.push('TEST ITEM');_x000D_
dialog.text('Submit button is enabled.');_x000D_
};_x000D_
}_x000D_
_x000D_
var vm = new ViewModel(dialog);_x000D_
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />_x000D_
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>_x000D_
_x000D_
<div id="my-dialog">_x000D_
Submit button is disabled at initialization._x000D_
</div>
_x000D_
The magic comes from the jQuery UI source:
$( "<button></button>", props )
You can basically call ANY jQuery instance function by passing it through the button object.
For example, if you want to use HTML:
{ html: '<span class="fa fa-user"></span>User' }
Or, if you want to add a class to the button (you can do this multiple ways):
{ addClass: 'my-custom-button-class' }
Maybe you're nuts, and you want to remove the button from the dom when it's hovered:
{ mouseover: function () { $(this).remove(); } }
I'm really surprised that no one seems to have mentioned this in the countless number of threads like this...
this code disable the button with 'YOUR_BUTTON_LABEL'. you can replace name in contains(). to disable
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");
replace 'YOUR_BUTTON_LABEL' with your button's label. to enable
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");
Looks like anyone, even in this linked question, have proposed this solution, similar to the first part of the answer given by 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");
}
}
]
});
Then, elsewhere, you should be able to use the API for the jquery UI button:
$("#button-ok").button("disable");
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' );
}
}
You can disable a button when you construct the dialog:
$(function() {_x000D_
$("#dialog").dialog({_x000D_
modal: true,_x000D_
buttons: [_x000D_
{ text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },_x000D_
{ text: "Cancel", click: function() { $(this).dialog("close"); } }_x000D_
]_x000D_
});_x000D_
});
_x000D_
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
_x000D_
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>_x000D_
_x000D_
<div id="dialog" title="Confirmation">_x000D_
<p>Proceed?</p>_x000D_
</div>
_x000D_
Or you can disable it anytime after the dialog is created:
$(function() {_x000D_
$("#dialog").dialog({_x000D_
modal: true,_x000D_
buttons: [_x000D_
{ text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },_x000D_
{ text: "Cancel", click: function() { $(this).dialog("close"); } }_x000D_
]_x000D_
});_x000D_
setTimeout(function() {_x000D_
$("#dialog").dialog("widget").find("button.confirm").button("disable");_x000D_
}, 2000);_x000D_
});
_x000D_
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
_x000D_
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>_x000D_
_x000D_
<div id="dialog" title="Confirmation">_x000D_
<p>Button will disable after two seconds.</p>_x000D_
</div>
_x000D_
I created a jQuery function in order to make this task a bit easier. Probably now there is a better solution... either way, here's my 2cents. :)
Just add this to your JS file:
$.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;}
});};
Disable button 'Ok' on dialog with class 'dialog':
$('.dialog').dialogButtons('Ok', 'disabled');
Enable all buttons:
$('.dialog').dialogButtons('enabled');
Enable 'Close' button and change color:
$('.dialog').dialogButtons('Close', 'enabled').css('color','red');
Text on all buttons red:
$('.dialog').dialogButtons().css('color','red');
Hope this helps :)
You can overwrite the buttons array and left only the ones you need.
$( ".selector" ).dialog( "option", "buttons", [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] );
You can also use the not now documented disabled
attribute:
$("#element").dialog({
buttons: [
{
text: "Confirm",
disabled: true,
id: "my-button-1"
},
{
text: "Cancel",
id: "my-button-2",
click: function(){
$(this).dialog("close");
}
}]
});
To enable after dialog has opened, use:
$("#my-button-1").attr('disabled', false);
JsFiddle: http://jsfiddle.net/xvt96e1p/4/
The following works from within the buttons click function:
$(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');
}
}
});
}
You could do this to disable the first button for example:
$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
Source: Stackoverflow.com