Knockoutjs에서 선택한 라디오 버튼을 기반으로 CSS 스타일 클래스 바인딩 적용

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을 호출하고 true를 반환하려고합니다. 그러나 CSS 클래스가 적용되지 않습니다.

디버깅 할 때 라디오 버튼을 클릭했을 때 checkRadioEnabled 함수 내부로 들어가는 것을 볼 수 있지만 값 매개 변수는 윈도우 객체로 제공됩니다. 라디오 버튼 값을 전달하고 함수 내에서 액세스하는 방법 checkRadioEnabled? 내가 여기서 뭐 잘못하고 있니?

Answer 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); 
});