根据在 Knockoutjs 中选择的单选按钮应用 CSS 样式 class 绑定

Question

我正在尝试根据当前选中的单选按钮使用数据绑定来应用 CSS 样式。

下面是我尝试应用但不起作用的代码..

<input type="radio" value="mtn" data-bind="checked: setRadioVal, css: {lblstylebold: checkRadioEnabled(this)}" id="mtnradio">
    <input type="radio" value="atn" data-bind="checked: setRadioVal, css: {lblstylebold: checkRadioEnabled(this)}" id="atnradio">

var ViewModel = {
   setRadioVal: ko.observable(null),
   checkRadioEnabled: function(value) {
   if (value == ViewModel.setRadioVal())
   return true;
   else
   return false;
   }
}
ViewModel.setRadioVal("mtn") // This gets sets initially with either mtn or atn based on ajax response which I have not posted here. Just for understanding I have set as mtn.

因此，一旦用户选择了其中一个单选按钮，setRadioVal 就会更新为 mtn 或 atn。当当前选择的单选按钮值等于启用值时，我试图调用函数 checkRadioEnabled 和 return true。但是 css class 没有被应用。

当我调试时，我看到它在单击单选按钮时进入函数 checkRadioEnabled，但值参数作为 window 对象出现。如何传递单选按钮值并在函数 checkRadioEnabled 中访问它？我做错了什么吗？

Answer 1

这里有一个fiddlehttp://jsfiddle.net/LkqTU/31964/

   <input type="radio"
      class="enabled"
      name="flavorGroup"
      value="mtm" 
      data-bind="checked: selectedValue" />
    <span data-bind="css: { enabled: selectedValue() === 'mtm' }">mtm</span>
    <input type="radio" 
     name="flavorGroup" 
     value="atm" 
    data-bind="checked: selectedValue" />
   <span data-bind="css: { enabled: selectedValue() === 'atm' }">atm</span>

js

function model() {
  var self = this;
  selectedValue = ko.observable("atm")
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

根据在 Knockoutjs 中选择的单选按钮应用 CSS 样式 class 绑定

Applying CSS style class binding based on Radio button selected in Knockoutjs

knockout.js

knockout-3.0