━目次━
はじめに
先日打ち合わせ中(業務画面の要件定義)にこんなシーンがありました。
お客「このボタンで遷移した時は何も入力出来ないし、ボタンも押せないようにして欲しいなぁ」
PL(プロジェクトリーダー)「えーと、項目めちゃくちゃ多いですからね～あんまやりたくはないですけど、、、フォームも分かれてますしねぇ～、、、じゃけぇさんどうですか？」
私「えーと、たぶん大丈夫ですよ。一括で出来るんじゃないですかね？」
（あんまり具体的な方法は分かってませんでしたが、そんな誰もが求めそうなこと出来ない訳がない！と思いました(笑)）
結果的には簡単に実装できたので報告します！
具体的には以下の手順で実装します。
１．divタグにidを付けてメインコンテンツを全て囲む
２．divの中のinput属性を全てdisabledにする★Point★
３．セレクトボックスなどがある場合は同様にdisabledにする
４．「戻る」ボタンなど処理ボタンのみdisabledを解除する
５．あるモードで遷移してきたときのみ上記処理を実行するようにすれば完成
１．divタグにidを付けてメインコンテンツを全て囲む
まずは画面のメインコンテンツを全てdivタグで囲みます。
(このdivタグは無くても良いですが、意図しない箇所がdisabledになるのを防ぐためにもやっておいたほうが良いです)
(divタグ無しの場合は、以降の「document.getElementById(“allArea”).getElementsByTagName(“input”)」を「document.getElementsByTagName(“input”)」としてください)
|
1 2 3 4 |
<div id="allArea"> <!-- 画面の色んなコンテンツ --> </div> |
２．divの中のinput属性を全てdisabledにする★Point★
考える人 ここがポイントじゃの！
以下のようにinput属性のものを一括で取得し、for文の中で1つずつdisabledにしていきます。
|
1 2 3 4 5 6 |
var inputItem = document.getElementById("allArea").getElementsByTagName("input"); for(var i=0; i<inputItem.length; i++){ inputItem[i].disabled = true; } |
IDは一意なのに対して、タグ名で指定すると複数選択される可能性があるので、
getElementById(“ID名”)とは違い、getElementsByTagName(“タグ名”)
となっていることに注意してください。
３．セレクトボックスなどがある場合は同様にdisabledにする
画面項目にセレクトボックスなどinput属性でない入力項目がある場合は上記の記述ではdisabledになっていないので、場合に応じて同じような処理を行ってください。
|
1 2 3 4 5 |
var selectItem = document.getElementById("allArea").getElementsByTagName("select"); for(var i=0; i<selectItem.length; i++){ selectItem[i].disabled = true; } |
４．「戻る」ボタンなど処理ボタンのみdisabledを解除する
これでできた！と思ったのですが、私の場合は画面に「戻る」があったのでこいつだけは押せるようにしないと
開いたが最後、どこへも行けない画面になってしまいますのでこいつだけID指定でdisabledを解除しました。
|
1 |
document.getElementById("backButton").disabled = false; |
５．あるモードで遷移してきたときのみ上記処理を実行するようにすれば完成
これは付録的ですが、あとは遷移してきたモードに応じて処理を実行すれば完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<% //サイトアドレス.jsp?mode=referenceで遷移してきた場合に実行するものとする String mode = request.getParameter("mode"); %> <head> <script> $(function(){ //参照モードで遷移してきたときは全項目入力不可にする var mode = "<%= mode %>"; if (mode == "reference") { //inputアイテムを全て入力不可にする var inputItem = document.getElementById("allArea").getElementsByTagName("input"); for(var i=0; i<inputItem.length; i++){ inputItem[i].disabled = true; } //selectアイテムを全て入力不可にする var selectItem = document.getElementById("allArea").getElementsByTagName("select"); for(var i=0; i<selectItem.length; i++){ selectItem[i].disabled = true; } //disabledを解除したいボタンがある場合 document.getElementById("backButton").disabled = false; } } </script> </head> <body> <div id="allArea"> <input type="button" id="backButton" value="戻る"> <!-- 色んなコンテンツ --> </div> </body> |
さいごに
とりあえず全部使えなくして使いたいとこだけ解除！って感じの考え方ですね＾＾
項目が多いときは重宝するかと思いますので参考までに
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
