AngularJS 在 ng-repeat 对话中禁用所有复选框

Question

我想分享如何在选中复选框并单击下面的按钮后禁用复选框列表。

我的用例是一个对话流，用户被问到一个问题，然后可以选择一个列表作为响应，即显示一个复选框列表。 选择框并单击下一步后，在显示下一个问题及其复选框之前，框和下一步按钮将被禁用。

HTML

<div ng-repeat="x in myConversation">
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-8 pull-right">
      <div style="margin-right:10px;margin-top:20px" class="panel panel-info">
        <div class="panel-heading">
          <div ng-show="x.question !==null">

            <p class="panel-title">
              {{x.question}}</p>
          </div>
          <div ng-show="x.question ==null || x.complete ==true">
            <p class="panel-title">
              {{proximateCause}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="row" ng-show="x.options.length >= 2 && x.complete ==false">
    <div class="col-xs-8">
      <div>
        <div style="margin-left:10px" class="container-fluid panel panel-default col-xs-8">
          <ul ng-repeat="i in x.options" class="list-group ">

            <li id="{{i}}" class="list-group-item">
              <div class="task-radio">
                <input ng-model="bool" ng-disabled="disableThis" type="checkbox" ng-checked="isChecked(i)"
                  ng-change="addCoverageType(bool, i, x.options)" />
                <span>{{i}}</span>
              </div>
            </li>
          </ul>
          <button style="margin-top:15px;margin-bottom:15px " ng-disabled="disableThis"
            ng-click="getDisambigQuestion();disableThis=true" type="button">Next
          </button>
        </div>
      </div>
    </div>
  </div>

JS

$scope.disableThis=false;