Javascript AngularJS限制要选中的复选框和要输入的文本框的数量

我有一个表单，用户只能有三个选择。
表单有10个复选框项和一个自由文本输入。因此，用户有十一个选项，用户只能从中选择三个：三个复选框或两个复选框，并在文本区域中放置一些文本。
如果最多达到三个复选框，或者如果用户选择在文本区域中放置某些内容并选择两个复选框，则禁用其他八个复选框，这样可以禁用其他复选框和文本区域。

以下是html模板：

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype"
                       ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)"
                  ng-model="myModel.mychosenfreetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

工种
：

{{topic.item}


{{subitem.values | translate}}


或者自己输入：

太久了！
太短了！

在代码中，我有两个

ng模型

，这并不理想，因为我想在一个模型中捕获响应并将其保存在我的数据库中的一个位置。

第一个问题: 如何组合上面的ng模型来捕获复选框和自由文本的响应，并将其放在一个模型中

问题二：

---

如果选择了三个选项（其中一个选项也可以是文本区），如何禁用其他复选框和自由文本？

回答第一个问题：

在

myModel.mychosenjobs

回答第二个问题： 使用

$scope

添加方法

shouldldisable

，以处理绑定到

ng disabled

指令的此问题，如下所示

HTML

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype" ng-disabled="shouldDisable(subitem.key)" ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)" ng-disabled="shouldDisable('freetext')" ng-model="myModel.mychosenjobs.freetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

---

回答您的第一个问题：

在

myModel.mychosenjobs

回答第二个问题： 使用

$scope

添加方法

shouldldisable

，以处理绑定到

ng disabled

指令的此问题，如下所示

HTML

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype" ng-disabled="shouldDisable(subitem.key)" ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)" ng-disabled="shouldDisable('freetext')" ng-model="myModel.mychosenjobs.freetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

---

对于第一个问题，如果我对两者使用相同的型号名称，当我检查复选框时，它会自动将

[object object]

放入自由文本区域。这就是它不起作用的原因。@Mpondomise，我可以知道你是如何使用文本框中的模型的吗？它应该是我上面提到的

ng model=“myModel.mychosenjobs.freetext>（或者）
ng model=“myModel.mychosenjobs['freetext']
。如果可能的话，创建一个可用的小提琴，我会在那里修复它。对不起，我现在意识到代码在控制台中抛出了一个错误：
TypeError:Cannot read属性'jobsubitemONE'of undefined at b.$scope.checkboxDisable
，它引用函数的第二行。为什么会发生这种情况？那么，您没有像看上去那样初始化模型。在控制器中，只需添加此行“$scope.myModel={}；//如果尚未完成”和“$scope.myModel.mychosenjobs={}”；对于第一个问题，如果我对这两个问题使用相同的模型名称，当我检查复选框时，它会自动将
[object object]
放入自由文本区域。这就是它不起作用的原因。@Mpondomise，我可以知道你是如何使用文本框中的模型的吗？它应该是我上面提到的
ng model=“myModel.mychosenjobs.freetext>（或者）
ng model=“myModel.mychosenjobs['freetext']
。如果可能的话，创建一个可用的小提琴，我会在那里修复它。对不起，我现在意识到代码在控制台中抛出了一个错误：
TypeError:Cannot read属性'jobsubitemONE'of undefined at b.$scope.checkboxDisable
，它引用函数的第二行。为什么会发生这种情况？那么，您没有像看上去那样初始化模型。在控制器中，只需添加以下行“$scope.myModel={}；//如果尚未完成”和“$scope.myModel.mychosenjobs={}；”