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

I have a jQuery dialog that requires the user to enter certain information. In this form, I have a "continue" button. I would like this "continue" button to only be enabled once all the fields have content in them, else it will remain disabled.

我有一个jQuery对话框，它要求用户输入某些信息。在这个表单中，我有一个“continue”按钮。我希望这个“继续”按钮只在所有字段都包含内容后才启用，否则它将继续禁用。

I wrote a function that is called everytime a field status has changed. However, I don't know how to enable and disable the dialog button from this function. What should I do?

我编写了一个函数，每当字段状态发生变化时，它就被调用。但是，我不知道如何从这个函数中启用和禁用对话框按钮。我应该做什么?

Oops and I forgot to mention that these buttons were created as follows:

哎呀，我忘了说这些按钮是这样创建的:

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

31 个解决方案

#1

You would want to set the disabled property

您需要设置禁用的属性。

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

Update: Ahha, I see the complexity now. The jQuery Dialog had a single line that will be of use (under the "buttons" section.

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

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

You'll need to get the buttons collection from the dialog, loop through that to find which one you need, and then set the disabled attribute as I showed above.

您将需要从对话框中获取按钮集合，并对其进行循环以找到需要的按钮，然后按上面所示设置禁用属性。

#2

It's very simple:

这是非常简单的:

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

#3

You are all over complicating a simple task; the jQueryUI dialog has two ways to set buttons for a reason.

你把一个简单的任务搞得太复杂了;jQueryUI对话框有两种设置按钮的方法。

If you only need to set the click handler for each button, use the option that takes an Object argument. For disabling buttons and provide other attributes, use the option that takes an Array argument.

如果您只需要为每个按钮设置单击处理程序，请使用接受对象参数的选项。对于禁用按钮和提供其他属性，请使用接受数组参数的选项。

The following example will disable a button, and update its state correctly by applying all of the jQueryUI CSS classes and attributes.

下面的示例将禁用一个按钮，并通过应用所有jQueryUI CSS类和属性来正确地更新它的状态。

Step 1 - Create your dialog with an Array of buttons:

步骤1 -用一系列按钮创建对话框:

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

Step 2 - Enable/disable the Done button after the dialog is created:

步骤2 -在对话框创建后，启用/禁用Done按钮:

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

#4

I wanted to be able to find the button by name (since I have several buttons in my jQuery UI dialog). I also have several dialogs on the page so I need a way to get the buttons of a specific dialog. Here is my function:

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

#5

If you create a dialog providing id's for the buttons,

如果您创建一个为按钮提供id的对话框，

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

we can disable button with the following code:

我们可以使用以下代码禁用按钮:

$("#dialogSave").button("option", "disabled", true);

#6

This disables a button:

这禁用按钮:

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

You have to add the dialog id if you have several dialogs on a page.

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

#7

Here's the sample from the question modified to disable the button once clicked:

下面的示例来自于修改后禁用按钮的问题:

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

Also, the following question will also be helpful with this: How can I disable a button on a jQuery UI dialog?

同样，下面的问题也会对这个问题有所帮助:如何在jQuery UI对话框中禁用按钮?

#8

I got this working with the method .dialog("widget") which returns the dialog DIV itself. If you're in the dialog methods:

我使用了方法.dialog(“widget”)，它返回对话框DIV本身。如果你在对话框方法:

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

#9

From a usability perspective, it's usually better to leave the button enabled but show an error message if someone tries to submit an incomplete form. It drives me nuts when the button I want to click is disabled and there is no clue to why.

从可用性的角度来看，最好让按钮处于启用状态，但如果有人试图提交不完整的表单，则显示一条错误消息。当我想要点击的按钮被禁用时，它会让我抓狂，而且我也不知道为什么。

#10

I found an easy way to disable (or perform any other action) on a dialog button.

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

    var dialog_selector = "#myDialogId";

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

You simply select the parent of your dialog and find all buttons. Then checking the Text of your button, you can identify your buttons.

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

#11

Try this:

试试这个:

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

#12

Here is my enableOk function for a jQuery dialog:

下面是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');
    }
}

The "first" button is the one furthest to the right. You both disable the button and set the dialog's disabled class, for the proper visual effect.

“第一”按钮是最右边的按钮。为了获得正确的视觉效果，您可以禁用按钮并设置对话框的禁用类。

#13

In the legacy jQuery UI (version 1.7.3) I was able to simply use

在遗留jQuery UI(版本1.7.3)中，我可以简单地使用它

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

to just disable the button on the DOM element itself. Now that we've upgraded to the newer jQuery UI (version 1.8.7) that method no longer works in Firefox, but I can simply call the jquery UI button specific disable and enable functions on the button jquery objects:

要禁用DOM元素本身上的按钮。现在，我们已经升级到更新的jQuery UI(版本1.8.7)，该方法在Firefox中不再适用，但是我可以简单地调用jQuery UI按钮特定的disable并启用jQuery对象上的函数:

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

#14

haha, just found an interesting method to access the bottons

哈哈，刚刚找到了一种有趣的方法来访问瓶子。

$("#dialog").dialog({

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

      }
 });

It seems you all don't know there is an event object in the arguments...

似乎你们都不知道参数中有一个事件对象……

by the way, it just accesses the button from within the callback, in general cases, it is good to add an id for access

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

#15

If you really want to disable a button, I found that you also need to call the .unbind() method on it. Otherwise the button may still be active, and a double-click could lead to multiple form submissions. The following code works for me:

如果您真的想要禁用一个按钮，我发现您还需要对它调用.unbind()方法。否则，该按钮可能仍然是活动的，双击可能导致多个表单提交。以下代码适用于我:

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

#16

I found a workaround that may apply to people trying to do something similar. Instead of disabling the button I put a simple if statement in the function to check if the checkbox was checked.

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

If it wasn't, it displayed a simple message saying the box had to be checked before submission.

如果不是，它会显示一条简单的消息，表示必须在提交之前选中该框。

For example:

例如:

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

Anyway, I hope that helps someone.

无论如何，我希望这能帮助某人。

#17

I created a jQuery function in order to make this task a bit easier. Just add this to your JavaScript file:

我创建了一个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;}
});};

Disable button 'OK' on dialog with class 'dialog':

禁用按钮“OK”与类“dialog”对话框:

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

Enable all buttons:

让所有按钮:

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

Enable 'Close' button and change color:

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

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

I hope this helps.

我希望这可以帮助。

#18

Unfortunately no solutions from given here worked for several dialogs on the page.

不幸的是，这里给出的任何解决方案都不能用于页面上的多个对话框。

Also the problem was that original dialog doesn't contain button pane in itself, but is a sibling of it.

另一个问题是，原来的对话框本身并不包含按钮窗格，而是它的一个兄弟。

So I came up with selecting by dialog ID like that:

所以我想到了像这样的选择对话框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' );
            },

...

…

and then the same getFirstDialogButton() function could be later used to enable button, e.g. after successful validation.

然后可以使用相同的getFirstDialogButton()函数来启用按钮，例如，在成功验证之后。

Hope it can help someone.

希望它能帮助某人。

#19

Here's an example that I just implemented using the Array method of assigning buttons, which then allows me to use id selectors later on - just as the accepted answer stated originally - to enable/disable buttons and even show/hide them completely as I'm doing.

这里有一个例子，我刚刚使用了分配按钮的数组方法来实现，然后允许我在以后使用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" );
}
});

After successfully submitting, I disable and hide two of the buttons and enable the OK button that was disabled by default.

成功提交后，我禁用并隐藏两个按钮，并启用默认禁用的OK按钮。

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

Hope this helps.

希望这个有帮助。

#20

I created a function similar to what Nick did, but my method would not require setting the dialogClass and you will be able to get the buttons of a specific dialog via the id (if more than one exists in your application)

我创建了一个与Nick类似的函数，但是我的方法不需要设置dialog类，您可以通过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;
} 

So if you created the dialog like so:

如果你创建这样的对话框:

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

You can get the buttons by doing the following:

你可以通过以下方式获得按钮:

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

To disable:

禁用:

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

To enable:

启用:

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

#21

Just for the record, this post helped me to solve my problem. In short words, you have to set the disabled attribute to disabled, not to false:

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

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

This is how all the code looks, I also added some styles to make it look 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);

#22

I think it should work with all,

我认为它应该适用于所有人，

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

#23

To Disable the Save button in my Dialog box use following line in your function.

要禁用对话框中的Save按钮，请在函数中使用以下行。

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

To change a text in a button use following line( this change the cancel button text to Close Me)

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

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

#24

@Chris You can use following lines of code to enable/disable dialog buttons until your check box check/unchecked

@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");
    });

Original source: http://jsfiddle.net/nick_craver/rxZPv/1/

原始资料来源:http://jsfiddle.net/nick_craver/rxZPv/1/

#25

Calling .attr("disabled", true) of course works, but using jQuery you'd like do it in more 'sugar' way, so I've written simple extension:

调用。attr(“disabled”，true)当然有效，但是使用jQuery，你可能更喜欢用“sugar”的方式，所以我写了一个简单的扩展:

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

Now you have functions enable() and disable(), so you can do your job that way:

现在您有了enable()和disable()函数，因此可以这样做:

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

Which is same as

这是一样的

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

and

和

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

#26

This did the job for me:

这对我很有帮助:

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

#27

In the jQuery world, if you want to select an object from a set of DOM elements, you should use eq().

在jQuery世界中，如果您想从一组DOM元素中选择一个对象，应该使用eq()。

Examples:

例子:

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

= $ var按钮(按钮).eq(1);

or

或

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

var按钮= $('按钮:eq(1)');

#28

If anybody is looking to replace a button with something like a loading animation when clicked (for example when a "Submit" button submits the form in the dialog) - you can replace the button with your image like this:

如果有人想在点击时用加载动画之类的东西替换一个按钮(例如，当“提交”按钮在对话框中提交表单时)，您可以用如下图片替换这个按钮:

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

jQuery replaceWith docs

jQuery replaceWith文档

#29

To disable one button, at dialog open:

要禁用一个按钮，对话框打开:

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

#30

I had one button I didn't want displayed till a trigger point.

我有一个按钮，我不想显示，直到一个触发点。

At first I tried this which works: -

一开始我尝试了这个方法:-

$(":button:contains('OK')").hide();

but leaves a line (because they have all gone!), so added this instead in my CSS: -

但是留下一行(因为它们都消失了!

.ui-dialog .ui-dialog-buttonpane {
display: none;
}

This hides ALL the buttons.

这隐藏了所有的按钮。

I can re-enable when needed by : -

我可以重新启用，当需要:-

$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button