Why Are My Knockout Radio Buttons Failing When Inside Another Element With A Click Binding?

I have a list of radio buttons. I want clicks on the

their in to also check the radio button. This all works up until I put a name attribute on the radio elements. Then

Solution 1:

The click is not reaching the radio button because knockoutjs returns false from the click handler, preventing the default action to happen (see: note 3). Just return true from the click handler (http://jsfiddle.net/HJGxX/4/):

<li data-bind="click: function() { $parent.val($data); return true; }">

Solution 2:

Having the name attributes all set to the same value makes all these radio buttons part of the same set, and you can only select one of them at once.

Read more about on radio buttons name attribute on www.W3.org