复选框在手风琴的 ng-repeat 中被禁用

Posted 2023-03-06

【中文标题】复选框在手风琴的 ng-repeat 中被禁用

【英文标题】：checkbox get disabled in ng-repeat of accordions

【发布时间】：2016-12-25 15:04:25

【问题描述】：

我已经建立了一个手风琴列表，每个手风琴代表一组项目。 我已经使用 ng-repeat 来遍历组名，每个组都有一个复选框，指示它是否被选中。

该示例适用于单组手风琴，但当我将手风琴放入 ng-repeat 时，根本无法选中复选框。

这是代码，每个组标题的主复选框显然不起作用，我正在尝试找出原因。

我的主要问题是：

1.如何使 Group1 和 Group2 和 Group3 的复选框处于活动状态，以便我可以正确选择它们，在当前情况下，我根本无法选择复选框（Group1，Group2 和 Group3）。

var app = angular.module('app',[]);

app.controller('mainCTRL',function($scope)
  $('.collapse').collapse();
  $scope.title="Hello World";
  $scope.items1 = ['Group1','Group2','Group3']
)

.ui-checkbox 
  display: none;

.ui-checkbox + label 
  position: relative;
  padding-left: 25px;
  display: inline-block;
  font-size: 14px;

.ui-checkbox + label:before 
  background-color: #fff;
  /**#fff*/
  border: 1px solid #1279C6;
  padding: 9px;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";

.ui-checkbox:checked + label:before 
  border: 1px solid #1279C6;
  color: #99a1a7;

.ui-checkbox:checked + label:after 
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 4px;
  color: #1279C6;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
    <div class="panel-group driving-license-settings" id="accordion-$index">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion-$index"
                       data-target="#collapseOne-$index">
                        <input type="checkbox" class="ui-checkbox" id="chk1-$index" value="">
                        <label for="chk1-$index">item</label>
                    </a>
                </h4>
            </div>
            <div id="collapseOne-$index" class="panel-collapse collapse ">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-1" value="">
                            <label for="chk2-cb-item-1">A</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-2" value="">
                            <label for="chk2-cb-item-2">B</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-3" value="">
                            <label for="chk2-cb-item-3">C</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-4" value="">
                            <label for="chk2-cb-item-4">D</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-5" value="">
                            <label for="chk2-cb-item-5">E</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

【问题讨论】：

您的手风琴使用angular ui bootstrap 吗？有了它，您可以执行以下操作：ng-click="$event.stopPropagation(); toggleOpen();" 在您的输入类型复选框上。

我不使用 bootstrap ui，你也可以在这个例子中看到我不使用 bootstrap UI 库。

【参考方案1】：

问题在于您分配的 ID。使 ids 唯一，复选框开始工作。这是固定的sn-p

var app = angular.module('app',[]);

app.controller('mainCTRL',function($scope)
  $('.collapse').collapse();
  $scope.title="Hello World";
  $scope.items1 = ['Group1','Group2','Group3']
)

.ui-checkbox 
  display: none;

.ui-checkbox + label 
  position: relative;
  padding-left: 25px;
  display: inline-block;
  font-size: 14px;

.ui-checkbox + label:before 
  background-color: #fff;
  /**#fff*/
  border: 1px solid #1279C6;
  padding: 9px;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";

.ui-checkbox:checked + label:before 
  border: 1px solid #1279C6;
  color: #99a1a7;

.ui-checkbox:checked + label:after 
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 4px;
  color: #1279C6;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
    <div class="panel-group driving-license-settings" id="accordion-$index">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion-$index"
                       data-target="#collapseOne-$index">
                        <input type="checkbox" class="ui-checkbox" id="chk1-$index" value="">
                        <label for="chk1-$index">item</label>
                    </a>
                </h4>
            </div>
            <div id="collapseOne-$index" class="panel-collapse collapse ">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-1" value="">
                            <label for="chk2-cb-item-1">A</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-2" value="">
                            <label for="chk2-cb-item-2">B</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-3" value="">
                            <label for="chk2-cb-item-3">C</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-4" value="">
                            <label for="chk2-cb-item-4">D</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-5" value="">
                            <label for="chk2-cb-item-5">E</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

【讨论】：

您的示例中的复选框仍然不起作用，我的意思是复选框 Group1、Group2 和 Group3。我需要这些复选框才能正常工作。

【参考方案2】：

问题是因为您的复选框嵌套在锚点内。简单地改变：

<a data-toggle="collapse" data-parent="#accordion-$index"
                       data-target="#collapseOne-$index">

收件人：

<div data-toggle="collapse" data-parent="#accordion-$index"
                       data-target="#collapseOne-$index">

查看工作示例：

var app = angular.module('app',[]);

app.controller('mainCTRL',function($scope)
  $('.collapse').collapse();
  $scope.title="Hello World";
  $scope.items1 = ['Group1','Group2','Group3']
)

.ui-checkbox 
  display: none;

.ui-checkbox + label 
  position: relative;
  padding-left: 25px;
  display: inline-block;
  font-size: 14px;

.ui-checkbox + label:before 
  background-color: #fff;
  /**#fff*/
  border: 1px solid #1279C6;
  padding: 9px;
  border-radius: 3px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";

.ui-checkbox:checked + label:before 
  border: 1px solid #1279C6;
  color: #99a1a7;

.ui-checkbox:checked + label:after 
  content: '\2714';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 4px;
  color: #1279C6;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
    <div class="panel-group driving-license-settings" id="accordion-$index">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <div data-toggle="collapse" data-parent="#accordion-$index"
                       data-target="#collapseOne-$index">
                        <input type="checkbox" class="ui-checkbox" id="chk1-$index" value="">
                        <label for="chk1-$index">item</label>
                    </div>
                </h4>
            </div>
            <div id="collapseOne-$index" class="panel-collapse collapse ">
                <div class="panel-body">
                    <div class="driving-license-kind">
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-1" value="">
                            <label for="chk2-cb-item-1">A</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-2" value="">
                            <label for="chk2-cb-item-2">B</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-3" value="">
                            <label for="chk2-cb-item-3">C</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-4" value="">
                            <label for="chk2-cb-item-4">D</label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" class="ui-checkbox" id="chk2-cb-item-5" value="">
                            <label for="chk2-cb-item-5">E</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>