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

Posted 2023-03-05

【中文标题】Bootstrap 单选按钮组敲除绑定不起作用

【英文标题】：Bootstrap radio button group knockout binding doesn't work

【发布时间】：2015-07-30 18:34:31

【问题描述】：

我跟着这个： 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 版本号，但主要版本号匹配。 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);
);

谁能指出为什么这不起作用？绑定只是一种方式。它获取初始值，但没有进一步的用处。

【参考方案1】：

试试 <div class="btn-group-vertical" data-toggle="buttons">删除data-toggle="buttons"

添加CSS：

label.btn > input[type='radio']

    display: none;

js: 移除$(document).ready(function ()

DEMO

【讨论】：

谢谢。关键是去掉data-toggle="buttons"！

我觉得<input type="radio" class="hidden" name="XXX" v-model="XXX"> 就可以了，不需要CSS了