javascript - 如何根据所选复选框的选择启用/禁用输入文本

Question

我有这张表:

我的问题是，如果我选中所选行的复选框，它将启用/禁用“Montant”输入，这是我的尝试，但它永远不会起作用我激活了所有行!!

    <table>
                            <thead>
                                <tr>

                                    <th >
                                      <input type="checkbox" />
                                    </th>
                                    <th>Montant</th>
                                </tr>
                            </thead>
                            <tbody ng-model="finalOperationsList">
                                <tr ng-repeat="item in finalOperationsList track by $index ">
                                    <td class="TableHeaderalignment"><input type="checkbox" 
                                        ng-model="finalOperationsList[$index].checked" ng-change="changeMontantLBL($index)"/></td>
                                    <td class="TableHeaderalignment">
                                       <input type="text" class="form-control" value="{{item.montant}}" ng-disabled="montantBL" />
                                    </td>

                                </tr>
                            </tbody>
                        </table>

这是 Controller 中的函数:

 $scope.changeMontantLBL =function($index){

                      if(true){
                          $scope.montantBL = false;
                      }
                      else{
                          $scope.montantBL = true; 
                      }
                  }

所以请问我如何更正我的代码以根据所选行复选框的选择启用/禁用输入“Montant”感谢您的帮助

Answer 1

可以直接消费输入文本框的ng-disabled中“finalOperationsList[$index].checked”的值，去掉ng -change 和 scope.montantBL 一起。

<tr ng-repeat="item in finalOperationsList track by $index ">
    <td class="TableHeaderalignment"><input type="checkbox" 
        ng-model="finalOperationsList[$index].checked"/></td>
    <td class="TableHeaderalignment">
       <input type="text" class="form-control" value="{{item.montant}}" ng-disabled="finalOperationsList[$index].checked" />
    </td>
</tr>

还值得注意的是，您可能误用了 value="{{item.montant}}"，应该使用 ng-model="item.montant" 相反。您还可以将该行的代码简化为:

<tr ng-repeat="item in finalOperationsList track by $index ">
    <td class="TableHeaderalignment">
        <input type="checkbox" ng-model="item.checked"/></td>
    <td class="TableHeaderalignment">
        <input type="text" class="form-control" ng-model="item.montant" ng-disabled="item.checked"/>
    </td>
</tr>