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

当前回答

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

其他回答

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

一开始我试着这样做:-

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

但是留下一行(因为他们都走了!),所以在我的CSS中添加了这个:-

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

这将隐藏所有的按钮。

我可以重新启用时,需要:-

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button

下面是我刚刚实现的一个示例,使用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();

希望这能有所帮助。

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

$("#dialog").dialog({

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

      }
 });

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

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

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

    var dialog_selector = "#myDialogId";

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

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

我希望能够通过名称找到按钮(因为我有几个按钮在我的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' );
}