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

您需要设置disabled属性

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

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

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

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


我发现了一个变通方法,可能适用于试图做类似事情的人。我没有禁用按钮,而是在函数中添加了一个简单的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");
            }
        }
    }
});

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


禁用按钮:

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

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


从可用性的角度来看,如果有人试图提交一个不完整的表单,最好保持按钮启用,但显示错误消息。当我想要点击的按钮被禁用时,我简直要发疯了,而且我也不知道为什么。


郑重声明,这篇文章帮我解决了我的问题。简而言之,你必须将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);

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

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


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

这很简单:

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

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

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

我认为这对所有人都有效,

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

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

    var dialog_selector = "#myDialogId";

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

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


试试这个:

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

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

我希望这能有所帮助。


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

例子:

Var按钮= $('按钮').eq(1);

or

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


你把一件简单的工作复杂化了;jQueryUI对话框有两种方法来设置按钮。

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

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

步骤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() { ... }
    }
] });

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

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

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

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

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

不幸的是,这里给出的解决方案对页面上的几个对话框都不起作用。

同样的问题是,原来的对话框本身不包含按钮窗格,但它是一个兄弟。

我想到了通过对话框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' );
            },

...

然后同样的getFirstDialogButton()函数可以稍后用于启用按钮,例如在成功验证之后。

希望它能帮助到一些人。


下面是修改后的问题示例,一旦点击就会禁用按钮:

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


下面是我刚刚实现的一个示例,使用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" );
}
});

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

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

希望这能有所帮助。


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

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

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

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

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

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


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

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

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

我创建了一个类似于尼克所做的函数,但我的方法不需要设置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');

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

这对我来说很管用:

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

哈哈,刚刚发现了一个有趣的方法来访问按钮

$("#dialog").dialog({

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

      }
 });

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

顺便说一下,它只是在回调中访问按钮,一般情况下,为访问添加一个id是很好的


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

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

jQuery替换为docs


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

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

我有一个按钮不想在触发点之前显示出来。

一开始我试着这样做:-

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

但是留下一行(因为他们都走了!),所以在我的CSS中添加了这个:-

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

这将隐藏所有的按钮。

我可以重新启用时,需要:-

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

根据文档:

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

jQuery解决方案为我工作。

$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);

您可以简单地将id添加到按钮,它不在文档中,但它可以工作。

(美元)。对话框(按钮:[{id:'你的按钮id'....}]);

然后在函数中使用

$('#your button id') 

禁用它。