如何通过功能禁用jQuery对话框中的按钮?


237

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

在以下位置有一个很好的答案:stackoverflow.com/questions/3646408/…–
阿米尔(Amir)

3
我对此进行了相当多的研究,发现到目前为止,最干净的解决方案在以下链接中进行了描述:stackoverflow.com/a/4279852

Answers:


260

您将要设置禁用的属性

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

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

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

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


不幸的是,JQuery对话框并不太容易实现,因此您需要做一些工作。

是的,但是button选项不会返回DOM元素,而是返回函数-遍历它们很好,但是禁用一个元素并不是那么简单。我在这里想念什么吗?
Remi Despres-Smyth'7

1
您需要变通解决此方法以禁用按钮。使用jQuery-foo从页面获取结果dom元素。
Stefan Kendall,2010年

36
同意-那么为什么要选择这个答案?-1为不完整。
Remi Despres-Smyth,2010年

22
我相信.prop('disabled', true)在jQuery
1.6+中

191

很简单:

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

4
我喜欢这种解决方案,但它实际上应该显示为:$(“:button:contains('Authenticate')”)。attr(“ disabled”,“ disabled”)。addClass('ui-state-disabled'); (addClass丢失了)
Eric Asberry 2010年

4
如果有多个对话框,则必须定义需要更改的对话框:$(“#dialogId”)。parent()。$(“:button:contains('Authenticate')”)。attr(“ disabled”,“已禁用“).addClass('ui-state-disabled');
podeig 2011年

5
+1:到目前为止,这是最好的答案...可接受的答案不回答任何问题,仅表示一种必要的方法-麻烦的是:我们不需要遍历任何东西,jQuery可以为我们做到这一点。
rsenna 2012年

1
由于jQueryUI对话框中的按钮是jQueryUI按钮,因此我发现它也起作用:$(“#dialogID”)。parent()。find(“:button:contains('Authenticate')”)。button(“ disable”) ;
writes_on

12
我相信.prop('disabled', true)在jQuery
1.6+中

38

到处都是使一个简单的任务复杂化;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);

2
想法正确,但each循环是不必要的。classbuttons数组中指定一个属性,您可以使用该属性找到正确的元素。
cdmckay 2011年

如cdmackay所说,您不需要循环。在上面的示例中,您可以继续使用jQuery选择器:var $ doneButton = $(“#done”);
罗布

当我尝试使用上述方法(数组方式)创建按钮时,按钮显示为“ 1”和“ 0”,而不显示为“完成”和“取消”。为什么会这样呢?文本未显示在按钮中,也未激活单击功能。
哈克

1
这对我有用,您不需要循环。设置ID,然后访问元素:this.myDialog.dialog(“ option”,“ buttons,[{id:” addAdapterFormOkButton“,文本:” OK“,单击:function(){}}])然后,您只需要用上面提到的选择器访问它:var okButt = $(“#addAdapterFormOkButton”); okButt.addClass('ui-state-disabled'); okButt.attr('disabled',true);
古纳德

32

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

7
我给了您+1,但我认为最好使用该方法代替按钮的属性,例如:$(“#dialogSave”)。button(“ disable”);
Fareed Alnamrouti 2012年

1
哈!到目前为止最简单!但是使用票价说的方法。
PapillonUK 2012年

29

我希望能够按名称查找按钮(因为我的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' );
}

不错的解决方案。不过,我在解决方案中提到按钮窗格不是对话框的子级-关键是设置一个唯一的dialogClass,并将其用作选择器。当我看着它时,这吸引了我。
Remi Despres-Smyth'7

有趣的是,按钮的文本是由button对象的键设置的。似乎仅限于不需要设置属性的情况。否则,数组版本会更好,在每个按钮上显式设置文本。
杰拉德·奥尼尔

19

这将禁用按钮:

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

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


11

以下是问题的示例,该问题已修改为单击一次即可禁用按钮:

$(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对话框上的按钮?


9

我找到了禁用(或执行任何其他操作)对话框按钮的简便方法。

    var dialog_selector = "#myDialogId";

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

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



8

从可用性的角度来看,通常最好将按钮保持启用状态,但是如果有人尝试提交不完整的表单,则显示错误消息。当我要单击的按钮被禁用并且为什么不知道时,它使我发疯。


6

试试这个:

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

5

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

“第一个”按钮是最右边的一个。为了获得适当的视觉效果,您都禁用了按钮并设置了对话框的禁用类。


请注意,这假设您在页面上只有一个对话框。此后,我编写了一个函数来按名称从页面上的任何对话框中获取任何按钮来处理此问题。
Remi Despres-Smyth,2010年

5

在旧版jQuery UI(版本1.7.3)中,我可以简单地使用

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

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

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

5

哈哈,刚发现一种有趣的方法来访问botton

$("#dialog").dialog({

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

      }
 });

似乎大家都不知道参数中有一个事件对象...

顺便说一句,它只是从回调中访问按钮,通常情况下,最好添加一个id进行访问


1
我认为这行不通。仅当双击“确定”按钮时,才会禁用该按钮。
让·弗朗索瓦·比彻姆

我需要禁用对话框上的“确定”按钮,直到处理完成。这工作得很好。
CodingYoshi

4

如果您确实想禁用按钮,我发现您还需要在其上调用.unbind()方法。否则,该按钮可能仍处于活动状态,并且双击可能导致提交多个表单。以下代码对我有用:

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

4

我发现了一种变通办法,可能适用于试图做类似事情的人们。我没有禁用按钮,而是简单地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");
            }
        }
    }
});

无论如何,我希望能对某人有所帮助。


4

我创建了一个jQuery函数,以使此任务更容易一些。只需将其添加到您的JavaScript文件中:

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
    var text = $(this).text();
    if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
    if(text==name){return this;}
    if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
    if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

在类为“ dialog”的对话框上禁用按钮“ OK”:

$('.dialog').dialogButtons('Ok', 'disabled');

启用所有按钮:

$('.dialog').dialogButtons('enabled');

启用“关闭”按钮并更改颜色:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

我希望这有帮助。


3

不幸的是,此处给出的解决方案都无法用于页面上的多个对话框。

还有一个问题是原始对话框本身不包含按钮窗格,而是它的同级窗口。

所以我想出了通过对话框ID进行选择的方法:

        var getFirstDialogButton = function (dialogSelector) {
            return $('.ui-dialog-buttonpane button:first',
                    $(dialogSelector).parent()[0]);
        };

...

        $('#my_dialog').dialog({
            open: function(event, ui) {
                getFirstDialogButton("#my_dialog")
                 .addClass("ui-state-disabled").attr('disabled', 'disabled' );
            },

...

然后可以在稍后成功验证后使用相同的getFirstDialogBu​​tton()函数来启用按钮。

希望它可以帮助某人。


3

这是一个示例,我刚刚使用分配按钮的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" );
}
});

成功提交后,我禁用和隐藏两个按钮,并启用默认情况下禁用的“确定”按钮。

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

希望这可以帮助。


3

我创建了一个类似于Nick的函数,但是我的方法不需要设置dialogClass,并且您将能够通过id获得特定对话框的按钮(如果您的应用程序中存在多个)

function getDialogButton( dialog_id, button_name) {
    var target = '#'+dialog_id;
    var buttons = $(target).parent().find('button');
    for ( var i=0; i<buttons.length; ++i ) {
        var jButton = $( buttons[i] );
        if ( jButton.text() == button_name ) {
              return jButton;
        }
    }
    return null;
} 

因此,如果您像这样创建对话框:

$(function() {
    $("#myDialogBox").dialog({

      bgiframe: true, height: 'auto', width: 700, modal: true,
      buttons: {
        'Add to request list': function() {
                                     $(this).dialog('close');
                                     $('form').submit();
                               },
        'Cancel': function() {
                       $(this).dialog('close');
                  }
      }
});

您可以通过执行以下操作获取按钮:

var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn           = getDialogButton('myDialogBox','Cancel');

禁用:

addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');

启用:

addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');

3

仅作记录,这篇文章帮助我解决了我的问题。简而言之,您必须将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);

3

我认为这应该适用于所有人

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog').dialog('open');
        $(function(){
            $('#dialog').dialog({
                autoOpen: true,
                width: 400,
                modal: true,
                overlay: {
                    opacity: 0.8,
                    background: "black"
                },
                resizable: false,
                show: 'slow',
                buttons: {
                    //"OK":function() {
                    //    window.location="index.php?view=list";
                    //},
                    "Cancel": function() {
                        $(this).dialog("close");
                        $(this).attr("class", "button");
                    }
                }
            });

            var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
            dlgFirstButton.addClass('button');
        });
    });
</script>

2

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

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

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

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

1

@Chris您可以使用以下代码行来启用/禁用对话框按钮,直到您的复选框处于选中/未选中状态

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


1

调用.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);

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

1

这为我做了工作:

$find("<%= btnPrint.ClientID %>").set_enabled(true);

1

在jQuery世界中,如果要从一组DOM元素中选择一个对象,则应使用eq()

例子:

var button = $('button')。eq(1);

要么

var button = $('button:eq(1)');


1

根据文档

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);

0

如果有人希望在单击时将按钮替换为诸如加载动画之类的东西(例如,当“提交”按钮在对话框中提交表单时)-您可以使用以下图像替换按钮:

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

jQuery replaceWith文档


0

要禁用一个按钮,请在对话框打开时:

$("#InspectionExistingFacility").dialog({
    autoOpen: false, modal: true, width: 700, height: 550,
    open: function (event, ui) {
        $("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
    },
    show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
    buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.