admin管理员组文章数量:1296388
I have build a list of accordions, each accordion represent a group of items. I have used ng-repeat to iterate through group names,each group has a checkbox which indicate if it is chosen or not.
The example works fine for single group of accordion, but the moment I am putting the accordion inside ng-repeat, the checkbox can't be selected at all.
Here is the code, the main checkbox of each group title doesn't work apparently, I am try to figure out the reason for this.
My main Question is:
1.How can I make the checkboxes of Group1 and Group2 and Group3 active,so I can select them properly, In current situation, I can't select the checkboxes at all(of Group1,Group2 and 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=".1.1/jquery.min.js"></script>
<script src=".3.6/js/bootstrap.min.js"></script>
<script src=".2.23/angular.min.js">
</script>
<link href=".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>I have build a list of accordions, each accordion represent a group of items. I have used ng-repeat to iterate through group names,each group has a checkbox which indicate if it is chosen or not.
The example works fine for single group of accordion, but the moment I am putting the accordion inside ng-repeat, the checkbox can't be selected at all.
Here is the code, the main checkbox of each group title doesn't work apparently, I am try to figure out the reason for this.
My main Question is:
1.How can I make the checkboxes of Group1 and Group2 and Group3 active,so I can select them properly, In current situation, I can't select the checkboxes at all(of Group1,Group2 and 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn./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>-
Do you use angular ui bootstrap for your accordion ? With it you can do something like this :
ng-click="$event.stopPropagation(); toggleOpen();"on your input type checkbox. – Galhem Commented Aug 18, 2016 at 15:53 - I don't use bootstrap ui, also you can see in this example that I don;t use bootstrap UI library. – Brk Commented Aug 21, 2016 at 6:58
2 Answers
Reset to default 8 +50The problem is because your checkboxes are nested inside anchors. Simply change:
<a data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
To:
<div data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
See working example:
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn./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>The problem is the ids you assigned. Make the ids unique, and the checkbox starts working. Here is the fixed snippet
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn./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>本文标签： javascriptcheckbox get disabled in ngrepeat of accordionsStack Overflow
版权声明：本文标题：javascript - checkbox get disabled in ng-repeat of accordions - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741636523a2389671.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论