質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

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

pecrow
pecrow

総合スコア11

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1回答

0グッド

0クリップ

684閲覧

投稿2019/07/08 13:07

編集2019/07/08 13:07

前提・実現したいこと

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>項目 A</option> 14 <option>項目 B</option> 15 <option>項目 C</option> 16 <option>項目 D</option> 17 <option>項目 E</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/

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

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 }

jQueryのイベントは、thisにそのイベントが起きた要素が入っていますので、それをコンテクストにするとイベントが起きた要素とその子孫要素に処理を限定できます。

jQuery( selector [, context ] )

jQuery() | jQuery API Documentation

投稿2019/07/09 01:24

編集2019/07/09 01:24
Lhankor_Mhy

総合スコア33631

pecrow👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

pecrow

2019/07/09 12:48

回答ありがとうございます! thisを使えばよかったのですね…… よく使い方が分かっていなかったので助かりました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。