Disable\Enable Bootbox button with KO

Question

I'm using a bootbox confirm dialog with a custom message template that is bound to ko observables. I wish to compute the obsrvables content and enable the "ok" confirm button only when the computed returns true.

At the moment I have this js:

self.name = ko.obsevable():
var messageTemplate = $("#add-template").html();
ko.applyBindings(self, messageTemplate);

bootbox.confirm({
                title: "Add new",
                message: messageTemplate,
                callback: function (value) {
                        // do something
                    }
                }
            }

And this html:

<div id="add-template" style="display:none">
    <form role="form">
        <div class="row">
            <div class="col-xs-8">
                <div class="form-group">
                    <input data-bind='value: name, valueUpdate: "afterkeydown"' placeholder="Name">
                </div>
            </div>
        </div>
    </form>
</div>

And it's working fine, but I wish to enable the bootbox "ok" button only when the "name" input is validated (with a costume validation function)

Is it possible? Thanks!

Answer 1

Well finaly i got it. Here is the answer :)

http://jsfiddle.net/6vb7e224/5/

var viewModel = function () {
    var self = this;
    self.name = ko.observable();

    self.select = function () {
        var messageTemplate = $($("#add-template").html());
        ko.applyBindings(self, messageTemplate.get(0));
        messageTemplate.show();

        bootbox.dialog({
                title: "Add new",
                message:  messageTemplate,
                callback: function (value) {

                },
                buttons: {
                    render: {
                        disabled: "false",
                        label: "render",
                        className: "btn-success",
                        callback: function() {
                            return false;
                        }
                    },
                    overrride: {
                        label: "override",
                        className: "btn-primary",
                        callback: function() {}
                    },
                }
            });

    }
}


ko.applyBindings(new viewModel());