Knockout Checkbox does not update UI when clicked, but viewModel is updated

Question

I have a set checkboxes:

<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>

And the following 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();
    });
});

It seem that it works just fine, the subscription works, the value is being updated, and the PUT resquest is being sent, and no console errors. But the checkbox UI does not change its state to reflect the Model when I click it. Any checkbox I add within the panel does not work, they have the same behavior, even when they are not bound to the view model.

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

What is wrong with my code, should I be doing an array or something like that, why cant I just use simple properties and bind them where I want?

I have fiddle with the formatted code: JSFIDDLE

Answer 1

This has nothing to do with Knockout. It's caused by Bootstrap. When you include data-toggle="buttons" , Bootstrap intercepts the click event to update the Bootstrap buttons. But you don't actually have any buttons, which causes the event to just be cancelled.

The easiest fix is to just remove data-toggle="buttons" as I've done to the last checkbox in your example: http://jsfiddle.net/mbest/RK96d/2/

Reference: http://getbootstrap.com/javascript/#buttons

Answer 2

According to all the HTML specs, the name and value attributes for checkboxes are required. It's possible that some browsers act strangely when they aren't supplied.