javascript - 由 foreach Knockout.js 构建的表内的动态复选框 - 将依赖项设置为启用

Question

我有一个带有表格的标记，其中包含三列(第一列:复选框，第二列:产品描述 - 通过 Restful 和 Web 服务检索，第三列:数量输入)，如下面的代码所示。

<thead>
     <tr>
          <th> Select </th>
          <th><center>Product Description</center></th>
          <th style="width: 150px; text-align: center">Quantity</th>
     </tr>
 </thead>

 <tbody data-bind="foreach: productsList">
     <tr> 
        <td>
            <fieldset data-role="controlgroup">
            <input type="checkbox" name="checkproduct" 
                 data-bind="checked: $parent.myproduct" 
                 style="padding-top:80px;width: 30px;height:20px" id="checkproduct">
            </fieldset>
        </td>

        <td>
            <p data-bind="text:productTextDescription"></p> 
        </td>

        <td>
           <input type="number" name="quantity" step="10.0" data-clear-btn="true"
            class="quantity" id="inputquantity" style="height: 55px"/>
        </td>

    </tr>
</tbody> 

我想知道如何将订阅链接到每个动态复选框，以便将其链接的数量输入设置为启用。本质上，表中的每一行代表客户端数据的“整个包”(意味着如果选择了产品，其数量不能为空)，这些数据旨在通过代码、Restful 和 Web 服务发送，以便在之后执行一些操作。

我已经能够使用 $parent.myproduct 设置订阅，但它无法按预期工作。每当我检查其中任何一个时，所有这些都会被检查。有什么可能是错误的猜测吗？

我的订阅如下:

myViewModel.myproduct.subscribe(function(newValue) {
    if(newValue){
      console.log(newValue);
    }
 });

我做了一些研究，但看起来这些似乎更有帮助:

http://jsfiddle.net/rniemeyer/Jm2Mh/

Knockout checkbox enable dependencies (Jsfiddle 不工作)

Answer 1

我猜你想要这样的东西:

   <td>
        <fieldset data-role="controlgroup">
        <input type="checkbox" name="checkproduct" 
             data-bind="checked: $data.isChecked" 
            style="padding-top:80px;width: 30px;height:20px" />
        </fieldset>
    </td>

    <td>
        <p data-bind="text: $data.productTextDescription"></p> 
    </td>

    <td>
       <input type="number" name="quantity" step="10.0" data-clear-btn="true"
        data-bind="enable: $data.isChecked, value: $data.quantity"
        class="quantity" style="height: 55px"/>
    </td>


var product = function(desc, isChecked, quantity) {
    this.isChecked = ko.observable(isChecked);
    this.quantity = ko.observable(quantity);
    this.productTextDescription = ko.observable(desc);
}

var viewmodel = function () {
    this.productsList = ko.observableArray();   
    this.productsList.push(new product("first product"));
    this.productsList.push(new product("second product"));
}

ko.applyBindings(new viewmodel());

Demo