我如何禁用jQuery UI对话框上的button？
我如何去禁用jQuery UI对话框上的button。 我似乎无法在上面的链接的任何文档中find这个。
我有两个模式确认button（“确认”和“取消”）。 在某些情况下，我想禁用“确认”button。
如果你包含了jQuery UI包含的.button()插件/小部件 （如果你有完整的库，并且在1.8+以上），你可以使用它来禁用button并更新状态这个：
$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
你可以在这里尝试一下 …或者如果你使用的是旧版本或者没有使用button部件，你可以像这样禁用它：
$(".ui-dialog-buttonpane button:contains('Confirm')").attr("disabled", true) .addClass("ui-state-disabled");
如果你想要在一个特定的对话框中，按ID来说，那么这样做：
$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')") .attr("disabled", true);
在其他情况下:contains()可能给出误报，那么你可以像这样使用.filter() ，但是由于你知道你的两个button，所以它在这里是过度的。 如果在其他情况下是这样的话，它会看起来像这样：
$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() { return $(this).text() == "Confirm"; }).attr("disabled", true);
这将阻止:contains()匹配其他东西的子string。
就像任何人一样，即使在这个相关的问题中 ，也提出了这个解决scheme，类似于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"); } } ] });
然后，在其他地方，你应该能够使用jQuery UIbutton的API ：
$("#button-ok").button("disable");
您也可以使用现在没有logging的disabled属性：
$("#element").dialog({ buttons: [ { text: "Confirm", disabled: true, id: "my-button-1" }, { text: "Cancel", id: "my-button-2", click: function(){ $(this).dialog("close"); } }] });
要打开对话框后启用，请使用：
$("#my-button-1").attr('disabled', false);
JsFiddle： http : //jsfiddle.net/xvt96e1p/4/
以下的作品从button点击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'); } } }); }
一个button由类的ui-button标识。 禁用button：
$("#myButton").addClass("ui-state-disabled").attr("disabled", true);
除非你dynamic创build对话框（这是可能的），你将知道button的位置。 所以，要禁用第一个button：
$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);
ui-state-disabled类是什么给了一个很好的暗淡风格的button。
我创build了一个jQuery函数为了使这个任务更容易一些。 现在可能有一个更好的解决scheme…无论如何，这是我的2cents。 🙂
只需将其添加到您的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;} });};
在类“对话框”的对话框中禁用button“确定”：
$('.dialog').dialogButtons('Ok', 'disabled');
启用所有button：
$('.dialog').dialogButtons('enabled');
启用“closures”button并更改颜色：
$('.dialog').dialogButtons('Close', 'enabled').css('color','red');
所有button上的文字为红色：
$('.dialog').dialogButtons().css('color','red');
希望这可以帮助 ：）
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' ); } }
你可以覆盖button数组，只留下你需要的。
$( ".selector" ).dialog( "option", "buttons", [{ text: "Close", click: function() { $(this).dialog("close"); } }] );
此代码使用“YOUR_BUTTON_LABEL”停用button。 你可以replacecontains（）中的名字。 禁用
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");
用您的button标签replace“YOUR_BUTTON_LABEL”。 启用
$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");
你可以这样做来禁用第一个button，例如：
$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); } Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }
这是我find的最简单最简单的方法。
如果你使用淘汰赛，那么这个更干净。 想象一下你有以下几点：
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>
构build对话框时，可以禁用button：
$(function() { $("#dialog").dialog({ modal: true, buttons: [ { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true }, { text: "Cancel", click: function() { $(this).dialog("close"); } } ] }); });
@import url("ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="dialog" title="Confirmation"> <p>Proceed?</p> </div>
这对我有用 –
$("#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" ); } } }); } }); } } });
