0

I want the "EnterTemplate" div to be conditionally available based on the radio buttons. I added the text data-bind at the very bottom for testing purposes, and it returns the "true" or "false" value to me based on the radio button values. I am trying to assign the visible binding this value, but nothing is happening. Any suggestions?

<div><h4>Select Instrument Template:</h4></div>
<div id="ChooseModel">
    <strong>Would you like to manually insert number?</strong><br />
    <input type="radio" name="ChooseModel" value="True" data-bind="checked: RadioOption"/>@Resx.Yes
    <input type="radio" name="ChooseModel" value="False" data-bind="checked: RadioOption"/>@Resx.No
</div>
<div id="EnterTemplate" data-bind="visible: RadioOption">
    <div><strong>Model Number: </strong></div>
    <div><input data-bind="value: ModelNumberString" /></div>
    <div><strong>Manufacturer: </strong></div>
    <div><input data-bind="value: ManufacturerString" /></div>

    <div>Model Number: <strong data-bind="text: ModelNumberString"></strong></div>
    <div>Checked: <strong data-bind="text: RadioOption"></strong></div>
</div>
Jeroen
  • 60,696
  • 40
  • 206
  • 339
mrshickadance
  • 1,213
  • 4
  • 20
  • 34
  • 1
    possible duplicate of [Binding true / false to radio buttons in Knockout JS](http://stackoverflow.com/questions/10127001/binding-true-false-to-radio-buttons-in-knockout-js) – Jeroen May 17 '13 at 19:05

1 Answers1

3

It will be always visible, because any non empty string is always truthy, you should do this:

data-bind="visible: RadioOption() === 'True'"

Or have other property that is boolean.

Tomas Kirda
  • 8,347
  • 3
  • 31
  • 23