我怎样才能禁用从一个函数jQuery对话框中的button？
我有一个jQuery对话框，要求用户input某些信息。 在这个表格中，我有一个“继续”button。 我希望这个“继续”button只有在所有的字段都有内容的时候才会启用，否则它将保持禁用状态。
我写了一个函数，每次字段状态改变时都会调用它。 但是，我不知道如何启用和禁用此function的对话框button。 我该怎么办？
哎呀，我忘了提及这些button创build如下：
$(function() { $("#dialog").dialog({ bgiframe: true, height: 'auto', width: 700, show: 'clip', hide: 'clip', modal: true, buttons: { 'Add to request list': function() { $(this).dialog('close'); $('form').submit(); }, 'Cancel': function() { $(this).dialog('close'); } } }) }); 你会想设置禁用的属性
$('#continueButton').attr("disabled", true);
更新 ：Ahha，我现在看到了复杂性。 jQuery对话框有一行可用（在“button”部分下）。
var buttons = $('.selector').dialog('option', 'buttons');
您需要从对话框中获取button集合，循环查找您需要的button集合，然后设置如上所示的禁用属性。
这很简单：
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
你已经完成了一个简单的任务， jQueryUI对话框有两种设置button的方法。
如果您只需要设置每个button的点击处理程序，请使用带有Object参数的选项。 要禁用button并提供其他属性，请使用带有Array参数的选项。
以下示例将禁用button，并通过应用所有jQueryUI CSS类和属性来正确更新其状态。
第1步 – 使用一组button创build对话框：
// Create a dialog with two buttons; "Done" and "Cancel". $(".selector").dialog({ buttons: [ { id: "done" text: "Done", click: function() { ... } }, { id: "cancel" text: "Cancel", click: function() { ... } } ] });
第2步 – 创build对话框后启用/禁用“完成”button：
// Get the dialog buttons. var dialogButtons = $( ".selector" ).dialog("option", "buttons"); // Find and disable the "Done" button. $.each(buttons, function (buttonIndex, button) { if (button.id === "done") { button.disabled = true; } }) // Update the dialog buttons. $(".selector").dialog("option", "buttons", dialogButtons);
我想能够findbutton的名称（因为我有我的jQuery UI对话框中的几个button）。 我也在页面上有几个对话框，所以我需要一种方法来获取特定对话框的button。 这是我的function：
function getDialogButton( dialog_selector, button_name ) { var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' ); for ( var i = 0; i < buttons.length; ++i ) { var jButton = $( buttons[i] ); if ( jButton.text() == button_name ) { return jButton; } } return null; } // create the dialog $('#my_dialog').dialog( dialogClass : 'dialog1', buttons: { Cancel: function() { $(this).dialog('close'); }, Submit: function() { ... } } ); // now programmatically get the submit button and disable it var button = getDialogButton( '.dialog1', 'Submit' ); if ( button ) { button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' ); }
如果你创build一个提供button的ID的对话框，
$("#dialog").dialog({ buttons: [ { id: "dialogSave", text: "Save", click: function() { $(this).dialog("close"); } }, { id: "dialogCancel", text: "Cancel", click: function() { $(this).dialog("close"); } }]});
我们可以用下面的代码禁用button：
$("#dialogSave").button("option", "disabled", true);
这将禁用一个button：
var firstButton=$('.ui-dialog-buttonpane button:first'); firstButton.addClass('ui-state-disabled');
如果您在页面上有多个对话框，您必须添加对话框ID。
以下是修改问题的示例，以便一旦单击就禁用button：
$(function() { $("#dialog").dialog({ bgiframe: true, height: 'auto', width: 700, show: 'clip', hide: 'clip', 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'); } } }); }
另外，下面的问题也会对此有所帮助： 如何禁用jQuery UI对话框上的button？
我find了一个简单的方法来禁用（或执行任何其他操作）对话框button。
var dialog_selector = "#myDialogId"; $(dialog_selector).parent().find("button").each(function() { if( $(this).text() == 'Bin Comment' ) { $(this).attr('disabled', true); } });
您只需select对话框的父级并查找所有button。 然后检查您的button的文本，您可以识别您的button。
我得到了这个方法.dialog("widget") ，它返回对话框DIV本身。 如果你在对话方法中：
$(this) .dialog("widget") .find("button") .addClass("ui-state-disabled") // for the style .attr("disabled", true);
从可用性的angular度来看，通常离开button通常会更好，但如果有人试图提交不完整的表单，则会显示错误消息。 当我想要点击的button被禁用，并且不知道为什么时，它使我疯狂。
尝试这个：
$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
这里是我的jQuery对话框的enableOk函数：
function enableOk(enable) { var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first'); if (enable) { dlgFirstButton.attr('disabled', ''); dlgFirstButton.removeClass('ui-state-disabled'); } else { dlgFirstButton.attr('disabled', 'disabled'); dlgFirstButton.addClass('ui-state-disabled'); } }
“第一个”button是最右边的那个button。 您都禁用该button，并设置对话框的禁用类，以适当的视觉效果。
在传统的jQuery UI（版本1.7.3），我能够简单地使用
$('.ui-dialog-buttonpane button')[0].disabled=true;
只是禁用DOM元素本身的button。 现在我们已经升级到更新的jQuery UI（版本1.8.7），该方法不再适用于Firefox，但我可以简单地调用jquery UIbutton特定的禁用和启用buttonjQuery对象的function：
$('.ui-dialog-buttonpane button').eq(0).button('disable');
如果你真的想禁用一个button，我发现你也需要调用它的.unbind（）方法。 否则，button可能仍处于活动状态，双击可能导致多个表单提交。 以下代码适用于我：
button = $(this).parent().find("button:contains('OK')"); button.unbind(); button.addClass('ui-state-disabled');
我发现了一个可能适用于尝试做类似事情的人的解决方法。 而不是禁用button，我把一个简单的if语句在函数中检查checkbox是否被选中。
如果不是这样，它会显示一个简单的信息，说在提交之前必须检查该框。
例如：
$("#confirmation-dialog").dialog({ modal: true, autoOpen: false, width: 600, overlay: { backgroundColor: '#000', opacity: 0.5 }, close: function() { $('input[type="submit"]') .val('Record Reading') .attr('disabled', false); }, buttons: { 'Confirm Reading': function() { if($('#check-box').attr("checked")){ $(this).dialog('close') $('form') .addClass('confirmed') .submit(); } else { $('#please-check').show("slide"); } } } });
无论如何，我希望能帮助别人。
我创build了一个jQuery函数为了使这个任务更容易一些。 只需将其添加到您的JavaScript文件中：
$.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');
我希望这有帮助。
哈哈，刚刚find一个有趣的方法来访问bottons
$("#dialog").dialog({ buttons: { 'Ok': function(e) { $(e.currentTarget).button('disable'); } } });
看来你们都不知道在论据中有一个事件对象…
顺便说一下，它只是从callback中访问button，在一般情况下，添加一个id访问是很好的
不幸的是没有从这里给出的解决scheme工作在页面上的几个对话框。
另外问题是，原来的对话框本身不包含button窗格，但是它的兄弟姐妹。
所以我想出了这样的对话框IDselect：
var getFirstDialogButton = function (dialogSelector) { return $('.ui-dialog-buttonpane button:first', $(dialogSelector).parent()[0]); };
…
$('#my_dialog').dialog({ open: function(event, ui) { getFirstDialogButton("#my_dialog") .addClass("ui-state-disabled").attr('disabled', 'disabled' ); },
…
然后可以稍后使用相同的getFirstDialogButton（）函数启用button，例如validation成功后。
希望它可以帮助别人。
这里有一个例子，我刚刚使用数组方法分配button，然后允许我以后使用IDselect器 – 就像最初所接受的答案 – 启用/禁用button，甚至完全显示/隐藏它们，因为我是这样做。
$( "#dialog-form" ).dialog({ autoOpen: true, height: 500, width: 450, modal: true, buttons: [ { id: "submit_btn", text: "Make Apointment", click: function() { //do ajax } }, { id: "cancel_btn", text: "Cancel", click: function() { $( this ).dialog( "close" ); } }, { id: "ok_btn", text: "OK", click: function() { $( this).dialog('close'); }, disabled: "disabled" }], close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } });
成功提交后，我禁用并隐藏两个button，并启用默认禁用的“确定”button。
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide(); $('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
希望这可以帮助。
我创build了一个类似于Nick的函数，但是我的方法不需要设置dialogClass，你可以通过id获得特定对话框的button（如果你的应用程序中存在多个button）
function getDialogButton( dialog_id, button_name) { var target = '#'+dialog_id; var buttons = $(target).parent().find('button'); for ( var i=0; i<buttons.length; ++i ) { var jButton = $( buttons[i] ); if ( jButton.text() == button_name ) { return jButton; } } return null; }
所以如果你这样创build对话框：
$(function() { $("#myDialogBox").dialog({ bgiframe: true, height: 'auto', width: 700, modal: true, buttons: { 'Add to request list': function() { $(this).dialog('close'); $('form').submit(); }, 'Cancel': function() { $(this).dialog('close'); } } });
您可以通过执行以下操作来获取button：
var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list'); var cancelBtn = getDialogButton('myDialogBox','Cancel');
禁用：
addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled'); cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');
启用：
addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled'); cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
只是为了logging，这个post帮助我解决了我的问题。 简而言之，您必须将disabled属性设置为disabled，而不是false：
_send_button.attr('disabled','disabled');
这是所有的代码看起来，我也添加了一些样式，使其看起来被禁用：
var _send_button = $('.ui-dialog-buttonpane button:contains(Send)'); var original_text = _send_button.text(); _send_button.text('Please wait...'); _send_button.addClass('ui-state-disabled'); _send_button.attr('disabled','disabled'); _send_button.fadeTo(500,0.2);
我认为它应该与所有人一起工作，
<script type="text/javascript"> $(document).ready(function() { $('#dialog').dialog('open'); $(function(){ $('#dialog').dialog({ autoOpen: true, width: 400, modal: true, overlay: { opacity: 0.8, background: "black" }, resizable: false, show: 'slow', buttons: { //"OK":function() { // window.location="index.php?view=list"; //}, "Cancel": function() { $(this).dialog("close"); $(this).attr("class", "button"); } } }); var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first'); dlgFirstButton.addClass('button'); }); }); </script>
要禁用我的对话框中的保存button，请在函数中使用以下行。
$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");
要更改button中的文本，请使用以下行（将取消button文本更改为closures我）
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
@Chris您可以使用以下代码行来启用/禁用对话框button，直到您的checkbox选中/取消选中
<div id="dialog-confirm" title="test"> <label>Enable Confirm?<input type="checkbox" checked /></label> </div> $("#dialog-confirm").dialog({ resizable: false, height:240, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); }, 'Confirm': function() { $(this).dialog('close'); } } }); $("#dialog-confirm :checkbox").change(function() { $(".ui-dialog-buttonpane button:contains('Confirm')") .button(this.checked ? "enable" : "disable"); });
原文出处： http : //jsfiddle.net/nick_craver/rxZPv/1/
当然，调用.attr("disabled", true)是.attr("disabled", true) ，但是使用jQuery你想用更多的“糖”来实现，所以我写了一个简单的扩展：
(function( $ ) { $.fn.disable = function(isDisabled) { var val = isDisabled; if (isDisabled === undefined) val = true; this.attr("disabled", val); }; $.fn.enable = function(isEnabled) { var val = !isEnabled; if (isEnabled === undefined) val = false; this.attr("disabled", val); } })( jQuery );
现在你有函数enable()和disable() ，所以你可以这样做你的工作：
$('#continueButton').disable();
这与之相同
$('#continueButton').disable(true);
和
$('#continueButton').enable(false);
这为我做了这份工作：
$find("<%= btnPrint.ClientID %>").set_enabled(true);
在jQuery世界中，如果你想从一组DOM元素中select一个对象，你应该使用eq（） 。
例子：
var button = $（'button'）。eq（1）;
要么
var button = $（'button：eq（1）'）;
如果任何人在点击时（例如当一个“提交”button在对话框中提交表单的时候正在寻找一个像加载animation一样的button） – 你可以像下面这样用你的图像replacebutton：
... buttons: { "Submit": function(evt) { $(evt.target).closest('button').replaceWith('<img src="loading.gif">'); } }
jQuery replaceWith文档
要禁用一个button，在打开的对话框中：
$("#InspectionExistingFacility").dialog({ autoOpen: false, modal: true, width: 700, height: 550, open: function (event, ui) { $("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled"); }, show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 }, buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } } });
我有一个button，我不想显示，直到触发点。
起初我试过这个工程： –
$(":button:contains('OK')").hide();
但留下一行（因为他们都走了！），所以添加这个，而不是在我的CSS： –
.ui-dialog .ui-dialog-buttonpane { display: none; }
这隐藏了所有的button。
我可以在需要时重新启用： –
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button
