敲除復選框在單擊時不會更新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屬性是必需的。 不提供某些瀏覽器時，它們的行為可能很奇怪。