Bootbox - 禁用BUtton

Question

我似乎无法在Bootbox上找到很多信息，我希望如果无效，我可以禁用搜索按钮。模态上有两个元素，一个需要提供。我原本以为这是一个叫做禁用的parm，你可以将逻辑传递给，但下面的代码不起作用。我错过了什么，似乎是一个基本要求。

search(){          
    bootbox.dialog({
        title: "Search Options",
        message: jQuery('#searchCriteria').html(),
        buttons: {
            cancel: {                    
                label: 'Cancel', 
                className: 'btn btn-default'
            },
            confirm: {
                disabled: this.canSearch(),
                label: 'Search', 
                className: 'btn-primary btn btn-info', 
                callback: function() {
                    this.searchOptions("test","1");
                    }
                } 
            },
        }
    });
}

Answer 1

我以前必须做这样的事情。我通过使用init函数将“观察者”应用到我注入对话框的表单中来完成它。

var dialog = bootbox.dialog({
    message: $('#my-template').html(),
    buttons: {
        cancel: {
            label: 'Cancel',
            callback: function(){ dialog.modal('hide'); }
        },
        submit: {
            label: 'Submit',
            className: 'submit-form btn-primary',
            callback: function() {
                // ... submit form via ajax?
            }
        }
    }
    // ... the rest
});

dialog.init(function(){
    var formID = '#my-form';

    $(formID)
        .on('change input', '.form-control', function(e){
            checkFormAndEnable(formID);
        })
        .on('submit', function(e){ 
            e.preventDefault(); 
        });
});

function checkFormAndEnable(selector) {
    var form = $(selector);

    var count = form.find('input[type!=hidden]').length;
    var emptyCount = form.find('input[type!=hidden]').filter(function () {
        return $.trim(this.value) !== "";
    }).length;

    var canValidate = count == emptyCount;
    if (canValidate) {
        dialog.find('.submit-form').prop({ 'disabled': !form.valid() });
    }
    else {
        dialog.find('.submit-form').prop({ 'disabled': true });
    }
}

这假设您正在使用jQuery Validate。如果没有，您将用您用于验证输入的任何内容替换!form.valid()。您还可以将init替换为.on('shown.bs.modal')，尤其是在多次显示表单时（init似乎只调用一次）。