Knockout Checkbox点击时不更新UI，但是viewModel更新了

Question

我有一组复选框：

<div class="panel panel-default" style="margin-right:10px;">
<div class="panel-heading">
    <span class="glyphicon glyphicon-cog"> Configurações Abreviar</span>
</div>
<div class="panel-body">
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Nome</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">                    
                <input type="checkbox" data-bind="checked: AbreviaNome" id="AbreviaNome">
                <input type="checkbox" data-bind="checked: AbreviaFantasia" id="AbreviaFantasia">
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Endereço</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">
                <input type="checkbox" data-bind="checked: AbreviaLogradouro" id="AbreviaLogradouro">
                <input type="checkbox" data-bind="checked: AbreviaComplemento" name="type" id="AbreviaComplemento">                    
                <input type="checkbox" data-bind="checked: AbreviaBairro" id="AbreviaBairro">
                <input type="checkbox" data-bind="checked: AbreviaCidade" id="AbreviaCidade">
            </div>
        </div>
    </div>
    <div class="row" style="margin-bottom:10px">
        <div class="col-lg-2">
            <span><strong>Extra</strong></span>
        </div>
        <div class="col-lg-10">
            <div class="btn-group btn-group-sm well" data-toggle="buttons">                                                
                <input type="checkbox" data-bind="checked: AbreviaExtra" id="AbreviaExtra">
            </div>
        </div>
    </div>
</div>

还有下面的 ViewModel：

function JobDetailsViewModel() {
    var self = this;
    var baseUri = '/Api/Pedidos/';

    self.AbreviaNome = ko.observable(false);
    self.AbreviaFantasia = ko.observable(false);
    self.AbreviaLogradouro = ko.observable(false);
    self.AbreviaComplemento = ko.observable(false);
    self.AbreviaBairro = ko.observable(false);
    self.AbreviaCidade = ko.observable(true);
    self.AbreviaExtra = ko.observable(true);

    var updatableData = {            
        AbreviaNome: self.AbreviaNome,
        AbreviaFantasia: self.AbreviaFantasia,
        AbreviaLogradouro: self.AbreviaLogradouro,
        AbreviaComplemento: self.AbreviaComplemento,
        AbreviaBairro: self.AbreviaBairro,
        AbreviaCidade: self.AbreviaCidade,
        AbreviaExtra: self.AbreviaExtra
    };

    self.update = function (formElement) {                
        alert('BOOM');
        $.ajax({
            type: "PUT",
            url: baseUri,
            data: ko.toJSON(updatableData),
            dataType: "json",
            contentType: "application/json"
        })
            .done(function (data) {


            })
            .error(function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
                alert("fail");
            });

    };
}

$(document).ready(function () {            
    var viewModel = new JobDetailsViewModel();       
    

    ko.applyBindings(viewModel);            
    viewModel.AbreviaNome.subscribe(function (newValue) {
        alert(newValue);
        viewModel.update();
    });
});

看起来它工作得很好，订阅工作正常，值正在更新，PUT 请求正在发送，并且没有控制台错误。 但是当我单击它时，复选框 UI 不会更改其状态以反映模型。我在面板中添加的任何复选框都不起作用，它们具有相同的行为，即使它们没有绑定到视图模型。

<input type="checkbox" name="type">

我的代码有什么问题，我应该做一个数组还是类似的东西，为什么我不能只使用简单的属性并将它们绑定到我想要的地方？

我已经修改了格式化代码：JSFIDDLE

Answer 1

这与淘汰赛无关。这是由引导程序引起的。当您包含 data-toggle="buttons" 时，Bootstrap 会拦截 click 事件以更新 Bootstrap 按钮。但是您实际上没有任何按钮，这会导致事件被取消。

最简单的解决方法是删除 data-toggle="buttons"，就像我对您示例中的最后一个复选框所做的那样：http://jsfiddle.net/mbest/RK96d/2/

参考：http://getbootstrap.com/javascript/#buttons

Answer 2

根据所有 HTML 规范，复选框的 name 和 value 属性是必需的。某些浏览器在未提供时可能会出现奇怪的行为。