如何从函数中禁用jQuery对话框中的按钮?

我有一个jQuery对话框，要求用户输入某些信息。在这个表单中，我有一个“continue”按钮。我想这个“继续”按钮只被启用一旦所有的领域有内容在他们，否则它将保持禁用。

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

哎呀，我忘了说这些按钮是这样创建的:

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

当前回答

如果有人想在点击时用加载动画替换按钮(例如当“Submit”按钮在对话框中提交表单时)-你可以像这样用你的图像替换按钮:

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

jQuery替换为docs

2013-12-09 23:41:01

其他回答

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

$("#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-25 19:06:59

你把一件简单的工作复杂化了;jQueryUI对话框有两种方法来设置按钮。

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

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

步骤1 -创建一个按钮数组对话框:

// 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 -在对话框创建后启用/禁用Done按钮:

// 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-19 00:35:25

试试这个:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

2010-09-03 23:21:13

在遗留的jQuery UI(版本1.7.3)中，我可以简单地使用

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

来禁用DOM元素本身的按钮。现在我们已经升级到更新的jQuery UI(版本1.8.7)，该方法不再适用于Firefox，但我可以简单地调用jQuery UI按钮特定的disable和enable函数的按钮jQuery对象:

$('.ui-dialog-buttonpane button').eq(0).button('disable');

2011-01-06 00:42:43

不幸的是，这里给出的解决方案对页面上的几个对话框都不起作用。

同样的问题是，原来的对话框本身不包含按钮窗格，但它是一个兄弟。

我想到了通过对话框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' );
            },

...

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

希望它能帮助到一些人。

2011-03-12 12:21:52

如何从函数中禁用jQuery对话框中的按钮?

推荐文章

最新文章

标签