使用Twitter Bootstrap按钮组作为带剔除绑定的单选 [英] Use Twitter Bootstrap button group as radio select with knockout bindings

问题描述

这有效:

view.html

<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div>
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need"  style="margin-top: -3px; margin-right: 3px;"/>I need to</div>

controller.js

function feedbackViewModel() {
    var self = this;
    self.priority = ko.observable("want");
    //lots of other stuff
}

按预期，当您选择第二个无线电时，可观察优先级的值将变为需要".但是，我想使用Twitter Bootstrap按钮组作为广播.这是我拥有的HTML，但是它并没有像预期的那样改变可观察到的东西:

As expected, when you select the second radio the priority observable's value changes to "need". However, I'd like to use a Twitter Bootstrap button group as a radio. Here is the HTML I have, but it does not change the observable as expected:

<span class="btn-group" data-toggle="buttons-radio">
    <button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button>
    <button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button>
</span>

更新我在这里有一个jsfiddle: http://jsfiddle.net/a8wa8/6/"priority1"是标准单选，而"priority2"是引导按钮.

update I have a jsfiddle going here: http://jsfiddle.net/a8wa8/6/ "priority1" is the standard radio selects and "priority2" is the bootstrap buttons.

推荐答案

问题是您正在将Checked绑定与不允许的按钮一起使用，而是可以使用单击绑定.检查这个小提琴:

The issue is that you are using Checked binding with button which is not allowed, instead you can use click binding. check this fiddle:

http://jsfiddle.net/a8wa8/7/

已更新:

是的，您可以使用ko css binding来实现.检查此更新的小提琴:

Yes you can achieve this by using ko css binding. Check this updated fiddle:

更新的小提琴

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