我有一个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');
      }
    }
  })
});

当前回答

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

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

要更改按钮中的文本,请使用以下行(将取消按钮的文本更改为关闭我)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

其他回答

你把一件简单的工作复杂化了;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);

从可用性的角度来看,如果有人试图提交一个不完整的表单,最好保持按钮启用,但显示错误消息。当我想要点击的按钮被禁用时,我简直要发疯了,而且我也不知道为什么。

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

$("#dialog").dialog({

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

      }
 });

似乎你们都不知道在参数中有一个事件对象…

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

我创建了一个类似于尼克所做的函数,但我的方法不需要设置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');

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

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

jQuery替换为docs