239

我有一个 jQuery 对话框，需要用户输入某些信息。在这种形式中，我有一个“继续”按钮。我希望这个“继续”按钮只有在所有字段都有内容时才启用，否则它将保持禁用状态。

我写了一个每次字段状态发生变化时调用的函数。但是，我不知道如何从此功能启用和禁用对话框按钮。我该怎么办？

哎呀，我忘了提到这些按钮是按如下方式创建的：

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

33 回答 33

261

你会想要设置disabled 属性

 $('#continueButton').attr("disabled", true);

更新：啊哈，我现在看到了复杂性。jQuery 对话框有一行可以使用（在“按钮”部分下。

 var buttons = $('.selector').dialog('option', 'buttons');

您需要从对话框中获取按钮集合，循环查找您需要的按钮集合，然后设置 disabled 属性，如上所示。

于 2009-02-23T13:04:06.900 回答
194

这很简单：

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
于 2010-01-27T04:07:35.053 回答
38

你把一个简单的任务复杂化了；jQueryUI 对话框有两种设置按钮的方法是有原因的。

如果您只需要为每个按钮设置点击处理程序，请使用带Object参数的选项。要禁用按钮并提供其他属性，请使用带Array参数的选项。

以下示例将禁用按钮，并通过应用所有 jQueryUI CSS 类和属性来正确更新其状态。

第 1 步 - 使用按钮创建对话框Array：

// 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 步 - 创建对话框后启用/禁用“完成”按钮： 

// 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);
于 2010-12-19T00:35:25.593 回答
32

如果您创建一个为按钮提供 id 的对话框，

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});

我们可以使用以下代码禁用按钮：

$("#dialogSave").button("option", "disabled", true);
于 2011-07-05T16:54:24.450 回答
29

我希望能够按名称找到按钮（因为我的 jQuery UI 对话框中有几个按钮）。我在页面上也有几个对话框，所以我需要一种方法来获取特定对话框的按钮。这是我的功能：

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' );
}
于 2010-01-18T19:13:15.780 回答
19

这会禁用一个按钮：

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

如果页面上有多个对话框，则必须添加对话框 ID。

于 2009-08-11T14:20:27.947 回答
11

这是修改后禁用按钮的问题示例：

$(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 对话框上的按钮？

于 2011-04-23T15:52:18.260 回答
9

我找到了一种在对话框按钮上禁用（或执行任何其他操作）的简单方法。

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

您只需选择对话框的父级并找到所有按钮。然后检查按钮的文本，您可以识别您的按钮。

于 2010-08-20T06:49:04.113 回答
9

我使用.dialog("widget")返回对话框 DIV 本身的方法来解决这个问题。如果您在对话框方法中：

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
于 2011-08-04T10:06:00.007 回答
8

从可用性的角度来看，通常最好让按钮保持启用状态，但如果有人尝试提交不完整的表单，则会显示错误消息。当我想单击的按钮被禁用并且不知道原因时，它让我发疯。

于 2009-09-08T10:31:40.450 回答
6

试试这个：

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
于 2010-09-03T23:21:13.070 回答
5

这是我的 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');
    }
}

“第一个”按钮是最右边的按钮。您既禁用按钮又设置对话框的禁用类，以获得适当的视觉效果。

于 2009-12-13T13:08:41.587 回答
5

在旧的 jQuery UI（版本 1.7.3）中，我能够简单地使用

$('.ui-dialog-buttonpane button')[0].disabled=true;

只是禁用 DOM 元素本身的按钮。现在我们已经升级到更新的 jQuery UI（版本 1.8.7），该方法不再适用于 Firefox，但我可以简单地调用 jquery UI 按钮特定的禁用和启用按钮 jquery 对象上的功能：

$('.ui-dialog-buttonpane button').eq(0).button('disable');
于 2011-01-06T00:42:43.413 回答
5

哈哈，刚刚发现了一个有趣的方法来访问按钮

$("#dialog").dialog({

      buttons: {
        'Ok': function(e) { $(e.currentTarget).button('disable'); }

      }
 });

看来你们都不知道参数中有一个事件对象...

顺便说一下，它只是从回调中访问按钮，在一般情况下，添加一个 id 进行访问是很好的

于 2012-10-01T09:35:06.780 回答
4

我找到了一种可能适用于尝试做类似事情的人的解决方法。我没有禁用按钮，而是if在函数中添加了一个简单的语句来检查复选框是否被选中。

如果不是，它会显示一条简单的消息，说明在提交之前必须检查该框。

例如：

$("#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");
            }
        }
    }
});

无论如何，我希望对某人有所帮助。

于 2009-02-23T23:51:01.090 回答
4

如果你真的想禁用一个按钮，我发现你还需要调用它的 .unbind() 方法。否则按钮可能仍然处于活动状态，双击可能会导致多个表单提交。以下代码适用于我：

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
于 2010-05-04T22:50:32.113 回答
4

我创建了一个 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;}
});};

禁用“对话框”类对话框上的“确定”按钮：

$('.dialog').dialogButtons('Ok', 'disabled');

启用所有按钮：

$('.dialog').dialogButtons('enabled');

启用“关闭”按钮并更改颜色：

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

我希望这有帮助。

于 2010-10-14T19:33:16.177 回答
3

只是为了记录，这篇文章帮助我解决了我的问题。简而言之，您必须将 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);
于 2009-09-26T11:06:38.623 回答
3

我认为它应该适用于所有人，

<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>
于 2010-06-17T18:18:21.713 回答
3

不幸的是，这里给出的解决方案没有适用于页面上的几个对话框。

问题还在于原始对话框本身不包含按钮窗格，而是它的兄弟。

所以我想出了这样的对话框ID选择：

        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' );
            },

...

然后相同的 getFirstDialogBu​​tton() 函数可以稍后用于启用按钮，例如在成功验证之后。

希望它可以帮助某人。

于 2011-03-12T12:21:52.840 回答
3

这是我刚刚使用分配按钮的 Array 方法实现的示例，然后允许我稍后使用 id 选择器 - 正如最初接受的答案所述 - 启用/禁用按钮，甚至完全显示/隐藏它们正在做。

$( "#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" );
}
});

成功提交后，我禁用并隐藏了两个按钮，并启用了默认禁用的 OK 按钮。

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

希望这可以帮助。

于 2011-05-12T19:07:21.827 回答
3

我创建了一个类似于 Nick 所做的函数，但我的方法不需要设置 dialogClass，您将能够通过 id 获取特定对话框的按钮（如果您的应用程序中存在多个按钮）

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;
}

因此，如果您像这样创建对话框：

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

您可以通过执行以下操作来获取按钮：

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');
于 2011-08-24T11:50:50.733 回答
3

根据文档：

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

为了能够简单地选择按钮，您可以向按钮添加自己的 CSS 类，应该启用/禁用。

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

然后启用/禁用将如下所示：

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);
于 2016-09-15T07:30:04.377 回答
2

要禁用我的对话框中的保存按钮，请在您的函数中使用以下行。

$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");

要更改按钮中的文本，请使用以下行（这会将取消按钮文本更改为关闭我）

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
于 2011-06-29T09:55:11.907 回答
1

在 jQuery 世界中，如果你想从一组 DOM 元素中选择一个对象，你应该使用eq()。

例子：

var button = $('button').eq(1);

或者

var button = $('button:eq(1)');

于 2010-10-29T08:33:32.000 回答
1

@Chris您可以使用以下代码行来启用/禁用对话框按钮，直到您的复选框选中/取消选中

<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/

于 2011-06-29T10:15:49.933 回答
1

调用.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()and disable()，所以你可以这样完成你的工作：

$('#continueButton').disable();

这与

$('#continueButton').disable(true);

和

$('#continueButton').enable(false);
于 2011-11-25T10:58:24.467 回答
1

这为我完成了工作：

$find("<%= btnPrint.ClientID %>").set_enabled(true);
于 2012-03-07T12:26:15.237 回答
0

如果有人希望在单击时用加载动画之类的东西替换按钮（例如，当“提交”按钮在对话框中提交表单时） - 您可以用您的图像替换按钮，如下所示：

...
buttons: {
    "Submit": function(evt) {
        $(evt.target).closest('button').replaceWith('<img src="loading.gif">');
    }
}

jQuery 替换文档

于 2013-12-09T23:41:01.860 回答
0

要禁用一个按钮，在对话框打开时：

$("#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"); } }
});
于 2014-09-25T19:06:59.607 回答
0

我有一个按钮，我不想在触发点之前显示。

起初我尝试了这个有效的方法： -

$(":button:contains('OK')").hide();

但留下一行（因为他们都走了！），所以在我的 CSS 中添加了这个：-

.ui-dialog .ui-dialog-buttonpane {
display: none;
}

这隐藏了所有按钮。

我可以在需要时通过以下方式重新启用：-

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button
于 2014-10-16T11:15:18.240 回答
0

jQuery 解决方案对我有用。

$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);
于 2018-08-17T23:44:40.263 回答
0

您可以简单地将 id 添加到按钮，它不在文档中，但它可以工作。

$().dialog(buttons:[{id:'your button id'....}]);

然后在你的函数中使用

$('#your button id')

禁用它。

于 2019-11-04T04:05:08.057 回答