javascript true チェックボックスは、アコーディオンのngリピートで無効になります




jquery selector checkbox true (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>

私はアコーディオンのリストを作成しました、各アコーディオンはアイテムのグループを表します。 ng-repeatを使用してグループ名を繰り返し、各グループには選択されているかどうかを示すチェックボックスがあります。

この例は、単一のグループのアコーディオンでうまく動作しますが、アコーディオンをng-repeatの中に入れている瞬間に、チェックボックスをまったく選択することはできません。

ここでコードは、各グループタイトルのメインのチェックボックスが明らかに機能しない、私はこれの理由を把握しようとしています。

私の主な質問は:

1.グループ1、グループ2、グループ3のチェックボックスをどのようにして有効にすることができるのですか?現時点では、グループ1、グループ2、グループ3のチェックボックスは選択できません。

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>


問題は割り当てたIDです。 IDを一意にすると、チェックボックスが機能し始めます。 ここには固定スニペットがあります

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>





checkbox