[jquery-ui]如何禁用从函数 JQuery 对话框中的按钮?

标签: jQuery jQuery-UI
发布时间: 2011/5/26 11:22:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

嗨,

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

解决方法 1:

您可能想设置 禁用属性

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

更新: Ahha,我现在看到的复杂性。JQuery 对话框 了一行,将使用 (下的"按钮"部分。

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

您需要获取从对话框中的按钮集合、 循环找到哪一个,您需要,并正如我上面,然后设置已禁用属性。

解决方法 2:

我想要能够按名称查找按钮,(因为我有我的 jQuery 用户界面对话框中的几个按钮)。我也有几个对话框在页面上,我需要的方式来获得特定的对话框的按钮。这里是我的功能:

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

解决方法 3:

它非常简单:

$(":button:contains('Authenticate')").attr("disabled","disabled"); 

解决方法 4:

这将禁用按钮:

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

您必须添加对话框 id,如果您的页面上有几个对话框。

解决方法 5:

对话框的按钮上,我发现一种禁用或执行任何其他操作的简便方法。

    var dialog_selector = "#myDialogId";

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

您只需选择您的对话框的父,并查找所有按钮。然后检查文本的按钮的位置,您可以确定你的按钮。

解决方法 6:

你是各地合并一个简单的任务 ;jQueryUI 对话框中有两种方法设置按钮的原因。

如果您只需要设置为每个按钮的 click 处理程序,使用所需的选项 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);

解决方法 7:

这里是我的 enableOk 函数,jQuery 的对话框:

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

"第一"的按钮是一个向右最远。你对中禁用该按钮和设置对话框的禁用的类,适当的视觉效果。

解决方法 8:

我发现了一种解决办法,可适用于做类似的尝试的人。禁用按钮而不是,我提出了简单的 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");
        }
      }
    }
  });

不管怎样,希望帮助的人。

解决方法 9:

只是为了记录 … … 这篇文章帮助我解决我的问题。简单地说的话,你要将属性设置为禁用,残疾,不以虚假: _send_button.attr('disabled','disabled') ;

这是怎样的所有代码,我也都添加一些样式,以使其看起来已禁用:

var _send_button = $(' button:contains(Send)') buttonpane-.ui-对话框的 ;var original_text = _send_button.text() ;_send_button.text ('请稍候 … …') ;_send_button.addClass('ui-state-disabled') ;_send_button.attr('disabled','disabled') ;_send_button.fadeTo(500,0.2) ;

解决方法 10:

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

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

解决方法 11:

嗨,

为了使此任务有点更容易创建一个 jQuery 函数。可能现在有一个更好的解决方案 … … 要么方式,这里是我的 2cents。:)

只是添加到您的 JS 文件:

$.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').dialogButtons('Ok', 'disabled');

启用所有的按钮:

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

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

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

希望这有助于:)

解决方法 12:

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

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

只禁用 DOM 元素本身上的按钮。现在,我们已经升级到较新的 jQuery UI (版本 1.8.7) 在 Firefox,不再工作的方法,但我可以简单地调用特定的 jquery UI 按钮禁用和启用按钮 dom 中的函数:

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

解决方法 13:

从可用性的角度看,它是通常更好地离开已启用的按钮,但显示的错误消息,如果有人试图提交一份不完整的表格。它开车送我逼疯,当我想要单击的按钮处于禁用状态,为什么没有任何线索。

解决方法 14:

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

我觉得会使用所有,

解决方法 15:

请尝试这种情况:

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

解决方法 16:

遗憾的是没有解决方案从这里给工作几个对话框的页面上。

也该原始的对话框不包含按钮窗格本身,但是它的兄弟的问题。

所以我提出了这样的对话框 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() 功能可以稍后使用启用按钮,例如成功验证之后。

希望它能帮助别人。

解决方法 17:

我试着去处理类似的问题,但对我来说。我想要一个的按钮被禁用,直至用户检查一个复选框。
香港专业教育学院已摆弄萤火,试图获取工作的东西,但没有结果。例如:

>>> var button = $('button')[1]
>>> button
<button class="ui-state-default ui-corner-all" type="button">
>>> button.attr("disabled", true)
TypeError: button.attr is not a function

任何建议?

解决方法 18:

从可用性的角度看,它是通常更好地离开已启用的按钮,但显示的错误消息,如果有人试图提交一份不完整的表格。它开车送我逼疯,当我想要单击的按钮处于禁用状态,为什么没有任何线索。

@ erikkallen: 添加新的数据,这是有效的你不知道你错过了什么。更新现有的数据,它不是有效的形式,为残疾人士的提交按钮显示你你并没有改变任何尚未。

解决方法 19:

嘿,克里斯,

在 jQuery 世界中,如果您想要选择的对象设置的 DOM 元素应使用 eq()

示例:

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

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

希望你还在这儿附近

嘉韵:)

解决方法 20:

下面是该示例从禁用按钮一次修改的问题:

$(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 用户界面对话框中的按钮?

解决方法 21:

这就是我刚刚实施使用数组分配方法的示例按钮,然后允许我一样接受答案说最初使用 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();

希望这有助于。

官方微信
官方QQ群
31647020