• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります




はじめに

先日打ち合わせ中(業務画面の要件定義)にこんなシーンがありました。

お客「このボタンで遷移した時は何も入力出来ないし、ボタンも押せないようにして欲しいなぁ」

PL(プロジェクトリーダー)「えーと、項目めちゃくちゃ多いですからね~あんまやりたくはないですけど、、、フォームも分かれてますしねぇ~、、、じゃけぇさんどうですか?」

私「えーと、たぶん大丈夫ですよ。一括で出来るんじゃないですかね?」
(あんまり具体的な方法は分かってませんでしたが、そんな誰もが求めそうなこと出来ない訳がない!と思いました(笑))

結果的には簡単に実装できたので報告します!

具体的には以下の手順で実装します。

手順
1.divタグにidを付けてメインコンテンツを全て囲む
2.divの中のinput属性を全てdisabledにする★Point★
3.セレクトボックスなどがある場合は同様にdisabledにする
4.「戻る」ボタンなど処理ボタンのみdisabledを解除する
5.あるモードで遷移してきたときのみ上記処理を実行するようにすれば完成

1.divタグにidを付けてメインコンテンツを全て囲む

まずは画面のメインコンテンツを全てdivタグで囲みます。
(このdivタグは無くても良いですが、意図しない箇所がdisabledになるのを防ぐためにもやっておいたほうが良いです)
(divタグ無しの場合は、以降の「document.getElementById(“allArea”).getElementsByTagName(“input”)」を「document.getElementsByTagName(“input”)」としてください)





2.divの中のinput属性を全てdisabledにする★Point★

考える人考える人

ここがポイントじゃの!

以下のようにinput属性のものを一括で取得し、for文の中で1つずつdisabledにしていきます。

IDは一意なのに対して、タグ名で指定すると複数選択される可能性があるので、

getElementById(“ID名”)とは違い、getElementsByTagName(“タグ名”)

となっていることに注意してください。

3.セレクトボックスなどがある場合は同様にdisabledにする

画面項目にセレクトボックスなどinput属性でない入力項目がある場合は上記の記述ではdisabledになっていないので、場合に応じて同じような処理を行ってください。

4.「戻る」ボタンなど処理ボタンのみdisabledを解除する

これでできた!と思ったのですが、私の場合は画面に「戻る」があったのでこいつだけは押せるようにしないと

開いたが最後、どこへも行けない画面になってしまいますのでこいつだけID指定でdisabledを解除しました。

5.あるモードで遷移してきたときのみ上記処理を実行するようにすれば完成

これは付録的ですが、あとは遷移してきたモードに応じて処理を実行すれば完成です。

さいごに

とりあえず全部使えなくして使いたいとこだけ解除!って感じの考え方ですね^^

項目が多いときは重宝するかと思いますので参考までに


それでは!また!!

最後まで読んで頂きありがとうございます!
これ以外にも興味ある記事がきっとあると思うので厳選記事をご査収あれ('◇')ゞ
厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-


新着記事の投稿通知を受け取りたい方は↓からお願いします。
今後メルマガ登録者に様々な情報共有をしていくことも考えています^^