checkbox get disabled in ng-repeat of accordions

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.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>

2 Answers

Answers 1

The 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.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>

Answers 2

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.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>

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati