0

I am trying to render a radio button list. I modified the code sample from this url and ended up with this piece of crap/code,

http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-radiobuttons.html

<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
        <!-- ko foreach: pets -->
            <input type="radio" name="radio1" data-bind="value: id, checked: $root.selectedID, attr: {'id': 'radio-1' + $index() }" />
            <label data-bind="attr: {'for': 'radio1' + $index() }, text: name"></label>
        <!-- /ko -->
</fieldset>

I don't know what I am doing wrong. I see in the rendered html, the div (with class ui-radio) surrounds just the input, the label is outside the div. And the resulting radio button list is completely out of format.

What am I doing wrong?

Thanks.

user471317
  • 1,231
  • 2
  • 22
  • 35
  • 1
    jquery-mobile modifies DOM heavily during init, it's very hard to make it working with knockout. – huocp Aug 01 '14 at 10:02
  • if you inspect DOM of the radio input on the jquery doc page, you will see it's quite different from the sample HTML code. – huocp Aug 01 '14 at 10:03

1 Answers1

1

you'll need to tell jquery mobile to enhance these manually. Here's how to do that:

$('[type="radio"]').checkboxradio();

https://stackoverflow.com/a/14550417/725866

Community
  • 1
  • 1
Jeremy Danyow
  • 26,470
  • 12
  • 87
  • 133