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

当前回答

要禁用对话框中的保存按钮,请使用函数中的以下行。

$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");

要更改按钮中的文本,请使用以下行(将取消按钮的文本更改为关闭我)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

其他回答

如果你真的想禁用一个按钮,我发现你还需要调用它的.unbind()方法。否则,按钮可能仍处于活动状态,双击可能导致提交多个表单。下面的代码为我工作:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

我得到这个工作与方法.dialog(“小部件”)返回对话框DIV本身。如果你在对话框方法中:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

郑重声明,这篇文章帮我解决了我的问题。简而言之,你必须将disabled属性设置为disabled,而不是false:

_send_button.attr('disabled','disabled');

这是所有代码的外观,我还添加了一些样式,使它看起来是禁用的:

var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);

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

    var dialog_selector = "#myDialogId";

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

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

我发现了一个变通方法,可能适用于试图做类似事情的人。我没有禁用按钮,而是在函数中添加了一个简单的if语句来检查复选框是否被选中。

如果不是,它会显示一条简单的消息,说在提交之前必须勾选复选框。

例如:

$("#confirmation-dialog").dialog({
    modal: true,
    autoOpen: false,
    width: 600,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    close: function() {
        $('input[type="submit"]')
      .val('Record Reading')
      .attr('disabled', false);
    },
    buttons: {
        'Confirm Reading': function() {
            if($('#check-box').attr("checked")){
                $(this).dialog('close')
                $('form')
                .addClass('confirmed')
                .submit();
            }
            else {
                $('#please-check').show("slide");
            }
        }
    }
});

不管怎样,我希望这能帮助到一些人。