Bootstrap单选按钮组敲除绑定不起作用

问题描述

我跟着这个：

（jQuery 2.0.3，Bootstrap 3.0.3，Knockout 3.0.0）

I followed this:http://volaresystems.com/blog/post/2013/12/09/Using-Bootstrap-3-radio-button-groups-with-Knockout-3-data-bindings(jQuery 2.0.3, Bootstrap 3.0.3, Knockout 3.0.0)

据我所知，唯一的区别是jQuery，Knockout和Bootstrap版本号，但主要版本号匹配。

（jQuery 2.1.3，Bootstrap 3.3.4，Knockout 3.3.0）

As far as I can see the only differences are the jQuery, Knockout and Bootstrap version numbers, but the major version numbers match.http://jsfiddle.net/csabatoth/rLtL16xk/12/(jQuery 2.1.3, Bootstrap 3.3.4, Knockout 3.3.0)

<p>
    Currently selected: <span data-bind="text: selectedOption"></span>
</p>

<div class="btn-group-vertical" data-toggle="buttons">
    <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Purchase Target Cat' }">
        <input type="radio" name="options" id="option1" data-bind="checked: selectedOption, checkedValue: 'Purchase Target Cat'">Purchase Target Cat
    </label>
    <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Purchase Existing Cat' }">
        <input type="radio" name="options" id="option2" data-bind="checked: selectedOption, checkedValue: 'Purchase Existing Cat'">Purchase Existing Cat
     </label>
     <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Existing Dog Purchases Target Cat' }">
        <input type="radio" name="options" id="option3" data-bind="checked: selectedOption, checkedValue: 'Existing Company Purchases Target Company'">Existing Dog Purchases Target Cat
     </label>
</div>

var viewModel = function () {
    var self = this;
    self.selectedOption = ko.observable("Target Cat");
}

$(document).ready(function () {
    var vm = new viewModel();
    ko.applyBindings(vm);
});

任何人都可以指出为什么这不起作用？绑定只是一种方式。它获得了初始值，但没有进一步的用处。

Can anyone point out why this doesn't work? The binding is only one way. It gets the initial value, but not useful further.

推荐答案

尝试
< div class =btn-group-verticaldata-toggle =buttons> remove data-toggle =buttons

try <div class="btn-group-vertical" data-toggle="buttons"> remove data-toggle="buttons"

添加css：

label.btn > input[type='radio']
{
    display: none;
}

js：remove $（document）.ready（ function（）{

js: remove $(document).ready(function () {

这篇关于Bootstrap单选按钮组敲除绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！