When binding a click event to li, that contains radio buttons, the radio button elements seems to lose the ability to being clicked. Visually, the radio buttons don't change, but the value is sent to the ViewModel observable property through the check binding, when being clicked.

Any suggestions?

    <li data-bind="click: setDimension, clickBubble: false", 
           css: { 'currentDimension' selectedDimension() === 'TimeD'}>

          <input type="radio" data-bind="checked: dimesionPresentation" value="0" />
          <input type="radio" data-bind="checked: dimesionPresentation" value="1" />

    </li>

As you can see, I have tried clickBubble: false, but doesn't help.

When binding a click event to li, that contains radio buttons, the radio button elements seems to lose the ability to being clicked. Visually, the radio buttons don't change, but the value is sent to the ViewModel observable property through the check binding, when being clicked.

Any suggestions?

    <li data-bind="click: setDimension, clickBubble: false", 
           css: { 'currentDimension' selectedDimension() === 'TimeD'}>

          <input type="radio" data-bind="checked: dimesionPresentation" value="0" />
          <input type="radio" data-bind="checked: dimesionPresentation" value="1" />

    </li>

As you can see, I have tried clickBubble: false, but doesn't help.

• javascript
• css
• html
• knockout-2.0

• I'm unable to repro your issue: jsfiddle/GZtGG. Your code is working fine, the radio buttons are checked correctly. Can you maybe try to repro it in a jsfiddle? – nemesv Commented Jun 17, 2013 at 18:56
• The li elements are inside an ul element, that is converted to a kendoPanelBar. Maybe that's the reason why??? – Javid Commented Jun 17, 2013 at 19:03
• 1 Specifying clickBubble for li element will not solve the problem because this stops click propagation from li to its parent. If you want to make sure your radio button is clicked, bind its click to empty funciton and specify clickBubble:true. That will enforce the click to happen at first on radio button and then on li element. Here is the jsFiddle: jsfiddle/MScuV/7 – Shalom Aleichem Commented Jun 18, 2013 at 0:30

2 Answers 2

The key is to return true; at the end of the click handler function! This updates the UI correctly.

you have to set clickBubble to false and also return true inside the click function. See the solution here: http://jsfiddle/a4m4puts/2

<li data-bind="click: setDimension">

<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="0" />
<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="1" />
<input type="radio" data-bind="checked: dimensionPresentation, click: function(){ click; return true}, clickBubble: false" value="2" />