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

Question

我有一个jQuery对话框,要求用户输入某些信息.在这种形式中,我有一个"继续"按钮.我想这个"继续"按钮只有在所有字段都包含内容后才能启用,否则它将保持禁用状态.

我编写了一个函数,每当字段状态发生变化时调用该函数.但是,我不知道如何从此功能启用和禁用对话框按钮.我该怎么办？

糟糕,我忘了提到这些按钮创建如下:

$(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');
      }
    }
  })
});

Answer 1

您可能希望设置disabled属性

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

更新:啊哈,我现在看到了复杂性.的jQuery的对话框有一个单一的线,这将是有用的(下称"按钮"部分下.

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

您需要从对话框中获取按钮集合,循环查找所需的按钮集合,然后按照上面的显示设置disabled属性.

Answer 2

这很简单:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

Answer 3

你们复杂化了一项简单的任务; jQueryUI对话框有两种设置按钮的方法.

如果只需要为每个按钮设置单击处理程序,请使用带Object参数的选项.要禁用按钮并提供其他属性,请使用带Array参数的选项.

以下示例将禁用按钮,并通过应用所有jQueryUI CSS类和属性来正确更新其状态.

第1步 - 使用Array按钮创建对话框:

// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
    {
        id: "done"
        text: "Done",
        click: function() { ... }
    },
    {
        id: "cancel"
        text: "Cancel",
        click: function() { ... }
    }
] });

步骤2 - 在创建对话框后启用/禁用"完成"按钮:

// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");

// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
    if (button.id === "done") {
        button.disabled = true;
    }
})

// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);

Answer 4

如果您创建一个提供按钮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);

Answer 5

我希望能够按名称找到按钮(因为我的jQuery UI对话框中有几个按钮).我在页面上也有几个对话框,所以我需要一种方法来获取特定对话框的按钮.这是我的功能:

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
                        buttons: {
                                   Cancel: function() { $(this).dialog('close'); },
                                   Submit: function() { ... } 
                             } );

// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
  button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}

Answer 6

这会禁用一个按钮:

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

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

Answer 7

以下是修改后的问题中的示例,以便在单击后禁用该按钮:

$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        height: 'auto',
        width: 700,
        show: 'clip',
        hide: 'clip',
        modal: true,
        buttons: {
            'Add to request list': function(evt) {

                // get DOM element for button
                var buttonDomElement = evt.target;
                // Disable the button
                $(buttonDomElement).attr('disabled', true);

                $('form').submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
}

此外,以下问题也将对此有所帮助: 如何禁用jQuery UI对话框上的按钮？

Answer 8

我使用.dialog("widget")返回对话框DIV本身的方法.如果你在对话框方法中:

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

Answer 9

从可用性的角度来看,通常最好保持启用按钮,但如果有人试图提交不完整的表单,则会显示错误消息.当我想点击的按钮被禁用时,它让我疯狂,并且没有任何线索.

Answer 10

我找到了一种在对话框按钮上禁用(或执行任何其他操作)的简单方法.

    var dialog_selector = "#myDialogId";

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

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

Answer 11

试试这个:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

Answer 12

这是我的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');
    }
}

"第一个"按钮是最右边的按钮.您都禁用该按钮并设置对话框的禁用类,以获得正确的视觉效果.

Answer 13

在遗留的jQuery UI(版本1.7.3)中,我能够简单地使用

$('.ui-dialog-buttonpane button')[0].disabled=true;

只是禁用DOM元素本身的按钮.现在我们已经升级到更新的jQuery UI(版本1.8.7),该方法在Firefox中不再有效,但我可以简单地调用jquery UI按钮特定的禁用和启用按钮jquery对象上的函数:

$('.ui-dialog-buttonpane button').eq(0).button('disable');

Answer 14

哈哈,刚刚发现了一种有趣的方法来访问它们

$("#dialog").dialog({

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

      }
 });

看来你们都不知道参数中有一个事件对象......

顺便说一句,它只是从回调中访问按钮,一般情况下,最好添加一个访问ID