如何从函数中禁用jQuery对话框中的按钮?

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

2013-12-09 23:41:01

其他回答

您可以简单地将id添加到按钮，它不在文档中，但它可以工作。

(美元)。对话框(按钮:[{id:'你的按钮id'....}]);

然后在函数中使用

$('#your button id')

禁用它。

2019-11-04 04:05:08

如果你创建一个对话框，为按钮提供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);

2011-07-05 16:54:24

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

2009-09-08 10:31:40

您需要设置disabled属性

 $('#continueButton').attr("disabled", true);

更新:啊哈，我现在看到复杂性了。jQuery对话框中有一行是有用的(在“按钮”部分下)。

 var buttons = $('.selector').dialog('option', 'buttons');

您需要从对话框中获取按钮集合，循环查找您需要的按钮，然后设置如上所示的disabled属性。

2009-02-23 13:04:06

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

希望这能有所帮助。

2011-05-12 19:07:21

如何从函数中禁用jQuery对话框中的按钮?

推荐文章

最新文章

标签