Bootbox -禁用BUtton

Question

我似乎在Bootbox上找不到太多的信息，我希望如果无效，我可以禁用搜索按钮。模式上的两个元素，其中一个需要提供。我认为这应该是一个名为disabled等的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函数将一个"watcher“应用到我注入到对话框中的表单来完成它。

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()。您也可以用.on('shown.bs.modal')替换init，特别是当表单显示多次时(init似乎只被调用一次)。