javascript - change - checkbox get disabled en ng-repeat de accordions

ng checked angular 6

Question

He compilado una lista de acordeones, cada acordeón representa un grupo de elementos. He usado ng-repeat para repetir los nombres de los grupos, cada grupo tiene una casilla de verificación que indica si se elige o no.

El ejemplo funciona bien para un solo grupo de acordeón, pero en el momento en que pongo el acordeón dentro de ng-repeat, la casilla no se puede seleccionar en absoluto.

Aquí está el código, la casilla de verificación principal de cada título de grupo no funciona, aparentemente, intento descubrir la razón de esto.

Mi pregunta principal es:

1.¿Cómo puedo activar las casillas de Group1 y Group2 y Group3, para poder seleccionarlas correctamente? En la situación actual, no puedo seleccionar las casillas de verificación (de Group1, Group2 y 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>

Answer 1

El problema es los identificadores que asignaste. Haga que los identificadores sean únicos y la casilla de verificación comience a funcionar. Aquí está el fragmento fijo

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>

Answer 2

El problema se debe a que sus casillas de verificación están anidadas dentro de los anclajes. Simplemente cambia:

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

A:

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

Ver ejemplo de trabajo:

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>