如何从函数中禁用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');
      }
    }
  })
});

当前回答

下面是一个jQuery对话框的enableOk函数:

function enableOk(enable)
{
    var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');

    if (enable) {
        dlgFirstButton.attr('disabled', '');
        dlgFirstButton.removeClass('ui-state-disabled');
    } else {
        dlgFirstButton.attr('disabled', 'disabled');
        dlgFirstButton.addClass('ui-state-disabled');
    }
}

“第一”按钮是最右边的那个。您可以禁用按钮并设置对话框的禁用类，以获得适当的视觉效果。

2009-12-13 13:08:41

其他回答

根据文档:

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

为了能够简单地选择按钮，你可以为按钮添加一个自己的CSS类，它应该是启用/禁用的。

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

然后启用/禁用看起来像这样:

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);

2016-09-15 07:30:04

调用。attr("disabled"， true)当然有效，但使用jQuery你想做更多的'糖'方式，所以我写了一个简单的扩展:

(function( $ ) {
  $.fn.disable = function(isDisabled) {
    var val = isDisabled;
    if (isDisabled === undefined)
        val = true;
    this.attr("disabled", val);
  };
  $.fn.enable = function(isEnabled) {
    var val = !isEnabled;
    if (isEnabled === undefined)
        val = false;
    this.attr("disabled", val); 
  }
})( jQuery );

现在你有了函数enable()和disable()，所以你可以这样做:

$('#continueButton').disable();

这和

$('#continueButton').disable(true);

and

$('#continueButton').enable(false);

2011-11-25 10:58:24

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

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

2010-05-04 22:50:32

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

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

jQuery替换为docs

2013-12-09 23:41:01

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

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

2011-06-29 10:15:49

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

推荐文章

最新文章

标签