我正在尝试使用基于所选当前单选按钮的数据绑定来应用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
并在选中的当前单选按钮值等于启用值时返回true。但是css类没有得到应用。
当我调试时,我看到单击单选按钮时它会进入函数checkRadioEnabled
,但是value参数将作为窗口对象出现。如何传递单选按钮值并在函数checkRadioEnabled
内访问它?
我在这里做错了吗?
答案 0 :(得分:1)
这是一个小提琴http://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);
});