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

Question

I am trying to apply CSS style using data-bind based on the current radio button being selected.

Below is the code I tried to apply but is not working..

<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.

So once user selects one of the radio button, setRadioVal gets updated with either mtn or atn. And I am trying to call the function checkRadioEnabled and return true when current radio button value selected is equal to the enabled value. But css class is not getting applied.

When I debugged, I see it is going inside the function checkRadioEnabled when radio button is clicked, but value parameter is coming as a window object. How to pass radio button value and access it inside the function checkRadioEnabled? Am I doing anything wrong here?

Bryan Dellinger · Accepted Answer · 2016-10-01 00:10:35Z

1

here is a fiddle 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);
});

answered Oct 1, 2016 at 0:10

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gopi Over a year ago

Sorry for the delay in accepting and thanks for the answer !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related