我有一个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

其他回答

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

禁用按钮:

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

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

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

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

jQuery替换为docs

如果你创建一个对话框,为按钮提供id,

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

我们可以用下面的代码禁用按钮:

$("#dialogSave").button("option", "disabled", true);

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

    var dialog_selector = "#myDialogId";

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

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