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

当前回答

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

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

我想到了通过对话框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()函数可以稍后用于启用按钮,例如在成功验证之后。

希望它能帮助到一些人。

其他回答

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

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

$("#dialog").dialog({

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

      }
 });

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

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

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

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

禁用按钮:

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

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

这对我来说很管用:

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