angular js中的复选框功能

checkbox functionality in angular js

本文关键字：复选框 功能 js angular      更新时间：2023-09-26

我在一行中有多个文本框，共有五列，这些文本框在默认情况下是禁用的，如果我选中与该特定行对应的复选框，则应该启用这些文本框。使用以下代码，我可以通过只选中第一个复选框来启用所有文本框。但我每排都需要一个单独的手术。

我的控制器代码：

$scope.checkEnable = function () {
    console.log($('#check').prop('checked'));
    $scope.enableText = !$('#check').prop('checked');
};

html:

<div class="row item-head" ng-repeat="item in area track by $index">
    <div class="col-md-4 col-xs-4 check-box">
        <input type="checkbox" id='check' ng-model="check" ng-change="checkEnable()" /> {{item.servicename}}
    </div>
    <div class="col-md-8 col-xs-8">
        <div class="row">
            <div class="col-md-2 col-xs-2"></div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="enableText" />
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="enableText" />
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="enableText" />
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="enableText" />
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="enableText" />
            </div>
        </div>
    </div>
</div>

在这种情况下，您甚至不需要控制器（当然也避免使用jQuery）。你只需要像ng-disabled="check":一样使用ngDisabled

<div class="row item-head" ng-repeat="item in area track by $index">
    <div class="col-md-4 col-xs-4 check-box">
        <input type="checkbox" ng-model="check"> {{item.servicename}}
    </div>
    <div class="col-md-8 col-xs-8">
        <div class="row">
            <div class="col-md-2 col-xs-2"></div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="check">
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="check">
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="check">
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="check">
            </div>
            <div class="col-md-2 col-xs-2">
                <input type="text" class="form-data" ng-disabled="check">
            </div>
        </div>
    </div>
</div>
相关文章：