Question

I have a code (you can play it at http://learn.knockoutjs.com/#/?tutorial=intro , click Run in output window before playing ):

HTML:

<div class="btn" style="margin-left: 15px;" data-bind="click: includeMyNumber">
   <input data-bind="checked: isIncludeMyNumber" data-val="true" id="IncludeMe" name="IncludeMe" style="margin: 0" type="checkbox" value="true" />&nbsp;
   Include my number (+<span>11111111111</span>) 
</div>

Javascript:

 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {

    this.isIncludeMyNumber = ko.observable(false);

    this.includeMyNumber = function(){
       this.isIncludeMyNumber(!this.isIncludeMyNumber());
    }
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

The problem is that checkbox click event handling does not work properly. When I click the space inside [div class=”btn”…] …[/div] area, checkbox behaviour is OK, but when I click the checkbox itself, it is not checked. How can I make it checkable in any case?

Thank you.

Answer 1

You´re use case is to make the checkbox checked when clicking the text?

I made a binding for this in my custom binding collection

https://github.com/AndersMalmgren/Knockout.Bindings

http://jsfiddle.net/5nqw4/

<input data-bind="checked: checked, label: { caption: 'Label with reference to input' }" type="checkbox" />

edit: You can also fix this by using the standard hack of wrapping the checkbox in a label element like http://jsfiddle.net/7dTfM/