敲除复选框在单击时不会更新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

这与淘汰赛无关。 这是由Bootstrap引起的。 当包含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属性是必需的。 不提供某些浏览器时，它们的行为可能很奇怪。