チェックボックスリストはドロップダウン選択では機能しません

私はかなり新しくコーディングし、異なるドロップダウンリストを表示するドロップダウンボックスを開発しようとしています。私はドロップダウンを作成することができ、適切なチェックボックスリストを選択しますが、ドロップダウンオプションが選択されていれば、それを使用するときには制限は適用されません。ドロップダウン選択の外にあるチェックボックスを使用すると、私が期待しているようにリミットセットが機能します。チェックボックスリストはドロップダウン選択では機能しません

私の現在のコードは次のとおりです。this answerパー

<body ng-app=""> 
    <div class="container"> 
     <div class="form-group"> 
      <div class="row"> 
       <div class="col-sm-8"> 
        <div ng-switch="myVar"> 
         <div ng-switch-when="dogs"> 
          <div class="pricing-levels-3"> 
           <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br> 
          </div> 
         </div> 
         <div ng-switch-when="tuts"> 
          <div class="pricing-levels-2"> 
           <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 1<br> 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
          </div> 
         </div> 
         <div ng-switch-when="cars"> 
          <h1>Cars</h1> 
          <p>Read about cars.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <h1>Select a topic:</h1> 
        <select ng-model="myVar" class="form-control"> 
         <option value="dogs">Dogs</option> 
         <option value="tuts">Tutorials</option> 
         <option value="cars">Cars</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
<script type="text/javascript"> 
    var limit = 3; 
    $('input.single-checkbox').on('change', function(evt) { 
     if ($(this).siblings(':checked').length >= limit) { 
      this.checked = false; 
     } 
    }); 
</script> 
<script type="text/javascript"> 
    var limit1 = 1; 
    $('input.single-checkbox1').on('change', function(evt) { 
     if ($(this).siblings(':checked').length >= limit1) { 
      this.checked = false; 
     } 
    }); 
</script>

出典

2017-09-19 Georgeehall

コピーして貼り付けたこのコードは、正常に動作するようです。https://jsfiddle.net/yedyL7hr/問題の内容を明確にすることはできますか？ – David

ドロップダウンオプション "Dogs"を選択したときに最初のリストが表示されても、チェックボックスの選択が制限されません。私は "チュートリアル"の下に2番目のリストを持っています、そして、それは再び選択を制限しません。しかし、ドロップダウンの外で使用されるとき、彼らは限界で動作します。 – Georgeehall

Angular - > ng-app とjQueryを同じコンテンツで使用しているとします。私はそれをお勧めしません。チェックボックスの一部だけを表示するために、ここでngSwitchを使ってアーカイブしたいものは本当に明確ではありませんか？ –

あなたは、角度がコンテンツを動的にする原因になっているので、あなたのjqueryのイベントとイベントの委任を使用する必要があります。

にコードを変更し

：

$(document).on('change','input.single-checkbox', function() { 

     if ($(this).siblings(':checked').length >= limit) { 
      this.checked = false; 
     } 
});

と

$(document).on('change','input.single-checkbox1', function() { 
     if ($(this).siblings(':checked').length >= limit1) { 
      this.checked = false; 
     } 
});

、それが正常に動作するはずです。

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

 
function MyCtrl($scope) { 
 
    $scope.myVar = ""; 
 
} 
 

 
    var limit = 3; 
 
    $(document).on('change','input.single-checkbox', function() { 
 
    
 
     if ($(this).siblings(':checked').length >= limit) { 
 
      this.checked = false; 
 
     } 
 
    }); 
 

 

 
\t var limit1 = 1; 
 
    $(document).on('change','input.single-checkbox1', function() { 
 
     if ($(this).siblings(':checked').length >= limit1) { 
 
      this.checked = false; 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container" ng-app="myApp"> 
 
     <div class="form-group"> 
 
      <div class="row"> 
 
       <div class="col-sm-8"> 
 
        <div ng-switch="myVar"> 
 
         <div ng-switch-when="dogs"> 
 
          <div class="pricing-levels-3"> 
 
           <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br> 
 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br> 
 
          </div> 
 
         </div> 
 
         <div ng-switch-when="tuts"> 
 
          <div class="pricing-levels-2"> 
 
           <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 1<br> 
 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
 
          </div> 
 
         </div> 
 
         <div ng-switch-when="cars"> 
 
          <h1>Cars</h1> 
 
          <p>Read about cars.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm-4"> 
 
        <h1>Select a topic:</h1> 
 
        <select ng-model="myVar" class="form-control"> 
 
         <option value="dogs">Dogs</option> 
 
         <option value="tuts">Tutorials</option> 
 
         <option value="cars">Cars</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

出典

2017-09-19 20:18:21

jqueryとangularはほとんどの場合混乱しないように注意してください。https://stackoverflow.com/questions/30007792/should-we- use-jquery-with-angularjs –

私は角で完全なソリューションを作成しました:)あなたは何をしたい、このにそれを願って、私にいくつかの時間を要しました！あなたがここで見つける

マイフィドル：http://jsfiddle.net/smoki99/LrLyr6L3/2/

をあなたは多分またあなたの側に角度を追加必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

これは私のHTMLコードです：

<div ng-app> 
<div ng-controller="controller"> 
    <div class="container"> 
     <div class="form-group"> 
      <div class="row"> 
       <div class="col-sm-8"> 
        <div ng-switch="myVar"> 
         <div ng-switch-when="dogs"> 
          <div class="pricing-levels-3"> 
           <p><strong>Which level would you like? (Select 3 Levels)</strong></p> 
           <div ng-repeat="dog in dogs"> 
           <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" ng-model="dog.selected" ng-change="checkSelection(dog,dogs,3);">{{dog.name}}<br> 
           </div> 

          </div> 
         </div> 
         <div ng-switch-when="tuts"> 
          <div class="pricing-levels-2"> 
           <p><strong>Which level would you like? (Select 1 Levels)</strong></p> 
           <div ng-repeat="tut in tuts"> 
           <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike" ng-model="tut.selected" ng-change="checkSelection(tut,tuts,1);">{{tut.name}}<br> 
           </div> 

          </div> 
         </div> 
         <div ng-switch-when="cars"> 
          <h1>Cars</h1> 
          <p>Read about cars.</p> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <h1>Select a topic:</h1> 
        <select ng-model="myVar" class="form-control"> 
        <option value="dogs">Dogs</option> 
        <option value="tuts">Tutorials</option> 
        <option value="cars">Cars</option> 
       </select> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div>

そして、これは私のJavascriptのです：

function controller($scope) { 
$scope.myVar = "dogs"; 

$scope.dogs = [ 
    { name: "level1", selected: false }, 
    { name: "level2", selected: false }, 
    { name: "level3", selected: false }, 
    { name: "level4", selected: false }, 
    { name: "level5", selected: false }, 
    { name: "level6", selected: false }, 
    { name: "level7", selected: false } 
]; 

$scope.tuts = [ 
    { name: "level1", selected: false }, 
    { name: "level2", selected: false }, 
    { name: "level3", selected: false } 
]; 

// check if not more than 3 level are checked 
$scope.checkSelection = function (entry, collection,limit) { 
     // dont check on unselect 
     if(entry.selected==false) 
     return; 

    var count=0; 
    angular.forEach(collection, function(e) { 
    if (e.selected===true) count++; 
    }); 

    if (count>limit) 
     entry.selected=false; 
} 

}

詳細な説明：

MVCを角度で使用する必要があります。チェックボックスの値はモデルに保存する必要があります。

私は2つの配列を作成しました：あなたは今、その場で（変更することができます。これにより

$scope.dogs = [ 
    { name: "level1", selected: false }, 
    { name: "level2", selected: false }, 
    { name: "level3", selected: false }, 
    { name: "level4", selected: false }, 
    { name: "level5", selected: false }, 
    { name: "level6", selected: false }, 
    { name: "level7", selected: false } 
];

か：

犬やTuts

宣言は「コントローラ」機能で行われますがajaxでは、オプションの名前と値が選択されていれば、そのオブジェクトの「選択された」属性に格納されます。

表示について「のforeach」と同じ多かれ少なかれある「NGリピート」が使用される配列、：

<div ng-repeat="dog in dogs"> 
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" ng-model="dog.selected" ng-change="checkSelection(dog,dogs,3);">{{dog.name}}<br> 
</div>

だから、それはそれぞれの「犬」エントリの行を作成し、我々は添付 - >ここに犬

コレクション - >ここに犬

要素：「選択」属性に定義され、3つのパラメータを持つ「変更」方法、を呼び出すと値リミット - >私たちは、このチェックはコントローラで定義されたこの方法で行われます3つの最大の選択

をしたい：

// check if not more than 3 level are checked 
$scope.checkSelection = function (entry, collection,limit) { 
     // dont check on unselect 
     if(entry.selected==false) 
     return; 

    var count=0; 
    angular.forEach(collection, function(e) { 
    if (e.selected===true) count++; 
    }); 

    if (count>limit) 
     entry.selected=false; 
}

ここでは、単純に選択されたすべての要素throu行くと、私たちは限度として、より多くのを持っている場合、現在のエントリを "false"に戻します。

私はこの説明があなたを助けてくれることを願っています！

出典

2017-09-19 21:04:14

あなたの答えをありがとう、私はそれを感謝します。それはJSFiddleで動作しますが、何らかの理由でこれを自分のコードに持ってきたときは動作しません。ありがとうございました。 – Georgeehall

あなたはCDN Linkが見つからないと思っています。 –

jqueryを使用し、角を持たない例が必要な場合はお知らせください –

チェックボックスリストはドロップダウン選択では機能しません

答えて

関連する問題