状態別フォームの送信される・されないのまとめ(セレクトボックス)
FireFoxやChromeの開発者を起動した状態で送信ボタンをクリック
フォーム送信されるものとされないものについて確認できます
jQueryのバージョンは1.12.1です
その他、bootstrap3のcssを読み込んでいます
要素のname属性値
選択肢
フォーム送信
解説
hogehoge1
AAA
BBB
CCC
DDD
EEE
される
普通のセレクトボックス
hogehoge2[]
AAA
BBB
CCC
DDD
EEE
される
普通のセレクトボックス(複数選択)
何かと使いにくいイメージ
配列の形式で送信される
hogehoge3
AAA
BBB
CCC
DDD
EEE
されてしまう
readonlyを付与したセレクトボックス
セレクトボックスをクリックするとわかるが値が変更できてしまう。
bootstrapのcssを読み込んでるとマウスオーバー時に禁止マークが表示される。
hogehoge4
AAA
BBB
CCC
DDD
EEE
されない
disabledを付与したセレクトボックス
セレクトボックスは変更不可
サーバーサイドの入力値チェックとかで困ったりする
hogehoge5
AAA
BBB
CCC
DDD
EEE
plugin status
ON
OFF
される
jquery.selection.js
というjqueryプラグインを使用したセレクトボックス
セレクトボックスは変更不可だけどフォーム送信される。3と4のいいとこ取りみたいなやつ。
指定した要素にunselectableという属性を追加し、各ブラウザ用に選択不可にするスタイルの付与をしているようです。
readonlyを別途追加することでbootstrap.css読み込み時のマウスオーバー表示にも対応できる
hogehoge5_2
AAA
BBB
CCC
DDD
EEE
plugin status
ON
OFF
される
hogehoge5にreadonlyを付与した状態。
bootstrap.cssを使っているとreadonlyを付与することで背景をグレーアウトしたりマウスオーバー時の禁止マークを表示できる