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

当前回答

下面是修改后的问题示例,一旦点击就会禁用按钮:

$(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:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

这对我来说很管用:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

我发现了一个禁用对话框按钮(或执行任何其他操作)的简单方法。

    var dialog_selector = "#myDialogId";

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

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

我创建了一个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'禁用对话框中的'OK'按钮:

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

启用所有按钮:

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

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

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

我希望这能有所帮助。

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