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

当前回答

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

其他回答

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

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

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

您需要设置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");
            }
        }
    }
});

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