Question

我有一个if条件，如果它为false，则禁用对话框按钮'proceed'。这是我输入的方式：

if (!goodtogo){
    $(".ui-dialog-buttonpane button:contains('Proceed')").button("disable");
}

有些如何禁用对话框按钮onclick。我该怎么办？

创建按钮的代码：

$("#dialog-rate").dialog({
   /*open: function (event, ui) {$(".ui-dialog-buttonpane button:contains('Proceed')")
   .button("disable"); },  */
   autoOpen: false,
   resizable: false,
   height: 200,
   width: 200,        
   modal: true,
   buttons: {
          "Proceed": function(){
                 //redirect to paypal for escrow.
                        window.location.replace("{{ domain_url }}/workroom/accept/{{ i.iter.key.id }}/" + rating);
                        $(this).dialog("close");

                 }              
          }
   });

Answer 1

首先，检查您的选择器是否实际选择了正确的按钮：

if (!goodtogo) {
    var button = $(".ui-dialog-buttonpane button:contains('Proceed')");
    console.log(button);
    $(button).button("disable");
}

您的选择器可能无法找到要禁用的正确元素，在这种情况下，控制台将记录[]。如果是这样，请发布您的标记和/或创建按钮的代码。

Answer 2

jquery对话框中的Ajax等待指示符

我有一个类似的问题，我想在jquery对话框中显示ajax等待指示符。我想出了对话框小部件的扩展。该扩展创建了一个额外的对话框方法“busy”，可以调用该方法来禁用和启用对话框。此方法还会阻止对话框内容区域内的所有输入。

<强>扩展：

$.extend($.ui.dialog.prototype, {
    busy: function (isBusy) {

        var dialogContent = $(this.element);
        if (isBusy) {
            $(dialogContent).find("input, textarea, select").blur();
        }

        if (this.blockedState === isBusy)
            return;

        this.blockedState = isBusy;

        var buttonPane = $(this.uiDialog).find(".ui-dialog-buttonpane");
        var buttons = $(buttonPane).find("button");

        if (isBusy) {
            $(buttons).addClass("ui-state-disabled").attr("disabled", "disabled");

            $(buttonPane).append($("<div class='ui-dialog-indicator'/>"));
            $(dialogContent).append($("<div class='ui-dialog-blocked'/>"));
        }
        else {
            buttons.removeClass("ui-state-disabled").removeAttr("disabled");

            $(buttonPane).find(".ui-dialog-indicator").remove();
            $(dialogContent).find(".ui-dialog-blocked").remove();
        }
    }
});

<强> CSS：

.ui-dialog-blocked
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.ui-dialog-indicator {
    background: white url(../Images/jquery-ui/ui-anim_basic_16x16.gif) right center no-repeat;
    width: 16px;
    height: 16px;
}

示例：

$("#myid").dialog({ modal: true, position: "center", resizable: false, width: "auto", context: this, buttons: { "Add": function () { $(this).dialog("busy", true); $.ajax({ ... complete: function () { $(this).dialog("busy", false); } }, "Close": function () { $(this).dialog("close"); } } });

Answer 3

实际上还有另一种方法来实现jqueryUI对话框中的按钮选项，方法是将其设置为一个对象数组，这将为您提供更多选项，如按钮ID，鼠标悬停事件等...：在你的情况下，你可以像这样做;）

$("#dialog-rate").dialog({
    autoOpen: false,
    resizable: false,
    height: 200,
    width: 200,        
    modal: true,
    buttons: [{
    {
        id:"Proceed-button",
        text: "Proceed",
        click: function() { 
            //redirect to paypal for escrow.
            window.location.replace("{{ domain_url }}/workroom/accept/{{ i.iter.key.id }}/" + rating);
            $(this).dialog("close");
        }
    }
    ]
});

你可以像这样禁用按钮：）

$("#Proceed-button").button("disable");

Answer 4

我做过类似的事情。可能是关于我的，因为为此目的我删除了很多代码，但这是一个在我的情况下工作的骨架。这将显示基于用户必须具有的权限才能查看按钮的按钮。

 $("#dialog").dialog({
            resizable: true,
            width: 'auto',
            height: 'auto',
            closeText: "Close",
            buttons: {
            <?php

            if($this->Auth->require_perm("notification"))
            {   
              echo "'Update': function update(){
                    $.ajax({
                        type: \"POST\",
                        data: \"_unique_id=\"+record_id,
                        success: function()
                        {
                            working code here 
                        }
                    });
                   }
             }}
          });

禁用带有条件的jquery ui对话框按钮

4 个答案:

jquery对话框中的Ajax等待指示符