Jinja2のfor文で複数表示させたセレクトボックスに対してそれぞれJQueryで選択個数制限をかける

前提・実現したいこと

FlaskとJQueryでwebアプリを作っています。
セレクトボックスをjinja2のfor文で複数出して、そのセレクトボックスの要素のうち5個中2個まで選択できて、3個目からは選択できないようにしたいです。

調べたところ、1つだけセレクトボックスを表示して2個制限するところまではできたのですが、for文を使って複数個のセレクトボックスを表示した際に個数制限がすべてのセレクトボックスに適応されてしまい、n個のセレクトボックスの中から2個要素を選択すると全てにロックがかかってしまいます。

JQuery初心者で全く分からないのでご教授いただけると助かります。

発生している問題・エラーメッセージ

5個中2個までという選択個数制限を1つ1つ独立して処理させたいが、全てのセレクトボックスの中から2つ選ぶと全てに制限がかかる。

該当のソースコード

Python
1from flask import *
2app = Flask(__name__)
3
4@app.route('/', methods=["GET", "POST"])
5def hello():
6
7    return render_template("index.html")
8
9
10if __name__ == "__main__":
11    app.run(debug=True)
12

html
1<!DOCTYPE html>
2
3<!DOCTYPE html>
4<html lang="ja" dir="ltr">
5  <head>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7    <meta charset="utf-8">
8    <title></title>
9  </head>
10  <body>
11    {% for i in range(5) %}
12      <select multiple size="5" class=selectbox>
13        <option>項目 Ａ</option>
14        <option>項目 Ｂ</option>
15        <option>項目 Ｃ</option>
16        <option>項目 Ｄ</option>
17        <option>項目 Ｅ</option>
18      </select>
19    {% endfor %}
20
21
22  <script type="text/javascript">
23    $('.selectbox').change(function() {
24    var count = $(".selectbox option:selected").length;
25    var not = $('.selectbox option').not(':selected');
26     if(count >= 2) {
27        not.attr("disabled",true);
28    }else{
29        not.attr("disabled",false);
30    }
31  });
32  </script>
33  </body>
34</html>
35
36

試したこと

class名を{{loop.index0}}で変化させたり、JQueryの方でeach処理などいろいろ試してみましたがうまくいかず、loop.indexで変化させたclassの個数分の処理を同じ数だけ作るくらいしか思いつきませんでした。

補足情報（FW/ツールのバージョンなど）

Jqueyの参考にさせていただいたサイト
https://lmn-blog.com/list_box01/

行動規範の内容に同意します

回答1件

ベストアンサー

js
1    $('.selectbox').change(function() {
2      var count = $("option:selected", this).length;
3      var not = $('option', this).not(':selected');
4      if(count >= 2) {
5        not.attr("disabled",true);
6      }else{
7        not.attr("disabled",false);
8      }