Oznakowanie checkbox i radio nokautem

Question

w HTML, kiedy kliknij na tekst lub najechaniu na tekst przycisku radiowego lub wyboru, jesteśmy w stanie go wybrać z html, jak pokazano poniżej:

<label> 
<input type="checkbox" />option 1 
</label> 

OR

<input id="checkboxid" type="checkbox" /> 
<label for="checkboxid">option 1</label> 

próbuję uzyskać ten sam problem z nokaut, ale nie może znaleźć wiele pomocy na ten sam:

<label data-bind="text: $data.optiontext"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
</label> 

The View (lub html) jest poniżej (Uwaga poniższy kod nie zawiera powyższy kod HTML, więc podczas próby to trzeba będzie wprowadzić powyższe zmiany i sprawdzić):

<div data-bind="foreach: options"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
    <label data-bind="text: $data.optiontext"></label> 
</div> 

<hr /> 

<div data-bind="text: selectedOptionsList"></div>​ 

Oto widok model:

var viewModel = { 
    options: [ 
       { optiontext: 'Simple', optionvalue: "1" }, 
       { optiontext: 'Advanced', optionvalue: "2" } 
      ], 
    selectedOptions: ko.observableArray(["2"]) 
}; 

viewModel.selectedOptionsList = ko.computed(function() { 
    return this.selectedOptions().join(","); 
}, viewModel); 

ko.applyBindings(viewModel); 

Oto link jsFiddle: http://jsfiddle.net/rupesh_kokal/AFzbY/

Answer 1

można osiągnąć w wersji 1. z użyciem dodatkowego span dla tekstu:

<label> 
    <input type="checkbox" data-bind="value: $data.optionvalue, 
      checked: $parent.selectedOptions" /> 
    <span data-bind="text: $data.optiontext"/> 
</label> 

Demo fiddle.

Lub wersja z użyciem attr binding ustawić id i atrybut for 2.:

<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions, attr: { id: optiontext}" />  
<label data-bind="text: $data.optiontext, attr: {for: optiontext}" /> 

Demo fiddle

Answer 2

Yo może nawet dostać wiązanie spadać dodatkowe przęsło -element, używając składni komentarza Knockouts:

<label> 
<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions" /> 
<!-- ko text: $data.optiontext --><!-- /ko --></label> 

Zapobiegnie to rozbijaniu się pola wyboru i rozpiętości na dwóch liniach, jeśli używane są w wąskich polach.