inputに入力があったら、該当箇所をハイライトし、他の入力箇所の無効化

inputに入力があったら、該当箇所をハイライトし、他の入力箇所の無効化と、入力のあった箇所と隣接したsubmit以外を無効化。
編集してる1つだけしか更新できません、という意図の実装がしたいです。

空の配列定義して、初期値の値としてfor文で回して配列にいれる。
その配列をinputで入力のあったタイミングでハイライトとfor文をイベントとして発火させ、for文内のif文で比較しながら、書き換えのない列をdisabledで無効化。

という書き方をしていたのですが（前のコードはこちら）、イベント発火した親要素とformを比較しても同じことができるはずだから、その書き方にしてほしい。と言われて、うまくいかずに困っています。

最初のコードは、formの群をdivで包んでいたのですが、class="container"と同じところにつけるように指示がきたので、HTML構造が少し書き換わりました。

本題の修正中のコードがこちら

お力をお貸しいただけると、大変嬉しく思います。
よろしくお願いします。

kei344

2017/01/06 08:53

書かれているコードは「という書き方をしていたのですが」のコードでしょうか。そちらのコードも追記されてはいかがでしょうか。

Scarlett

2017/01/06 09:19

ありがとうございます。書き換えました。

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

回答1件

ベストアンサー

JavaScript
1document.addEventListener( 'DOMContentLoaded', _=> {
2	const elements = document.querySelectorAll( '#change_form form' );
3	const len = elements.length;
4	document.addEventListener( 'input', e => {
5		const t = e.target;
6		const parent = t.parentNode;
7		t.style.backgroundColor = 'yellow';
8		for ( let i = 0; i < len; i++ ) {
9			if ( elements[ i ] === parent ) { continue; }
10			for ( let ii = 0; ii < elements[ i ].length; ii++ ) {
11				elements[ i ][ ii ].disabled = true;
12			}
13			/*
14			// テキストエリアだけなら下記でもできるはず
15			elements[ i ].querySelectorAll( 'input' )[ 0 ].disabled = true;;
16			*/
17		}
18	} );
19} );
20```**動くサンプル：**[https://jsfiddle.net/0mr5x0sa/2/](https://jsfiddle.net/0mr5x0sa/2/)
21
22---
23
24提示された下記「修正中のコード」は、
25
26```JavaScript
27 document.addEventListener("input", function(e){markAsEdited(e)});
28    function markAsEdited(e) {
29
30			var t = e.target;
31			var parent = t.parentNode;
32			t.style.backgroundColor = "yellow";
33			
34			var elements = document.querySelectorAll("#change_form form");
35      for (var i = 0; i < elements.length; i++) {
36            if(elements !== parent) {
37							for (var i = 0; i < parent.length; i++) {
38							 parent.querySelectorAll("input").disabled = true;
39							 }
40						}
41        }
42    }