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

当前回答

根据文档:

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

其他回答

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

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

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

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

$("#dialog").dialog({

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

      }
 });

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

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

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