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

Question

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

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

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

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

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

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

Comments

[kei344]

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

[Scarlett]

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

Answer 1

document.addEventListener( 'DOMContentLoaded', _=> {
	const elements = document.querySelectorAll( '#change_form form' );
	const len = elements.length;
	document.addEventListener( 'input', e => {
		const t = e.target;
		const parent = t.parentNode;
		t.style.backgroundColor = 'yellow';
		for ( let i = 0; i < len; i++ ) {
			if ( elements[ i ] === parent ) { continue; }
			for ( let ii = 0; ii < elements[ i ].length; ii++ ) {
				elements[ i ][ ii ].disabled = true;
			}
			/*
			// テキストエリアだけなら下記でもできるはず
			elements[ i ].querySelectorAll( 'input' )[ 0 ].disabled = true;;
			*/
		}
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/0mr5x0sa/2/](https://jsfiddle.net/0mr5x0sa/2/)

---

提示された下記「修正中のコード」は、

```JavaScript
 document.addEventListener("input", function(e){markAsEdited(e)});
    function markAsEdited(e) {

			var t = e.target;
			var parent = t.parentNode;
			t.style.backgroundColor = "yellow";
			
			var elements = document.querySelectorAll("#change_form form");
      for (var i = 0; i < elements.length; i++) {
            if(elements !== parent) {
							for (var i = 0; i < parent.length; i++) {
							 parent.querySelectorAll("input").disabled = true;
							 }
						}
        }
    }

1. var i = 0; を2回使っているため無限ループします
2. elements !== parent は Form の塊と現在の Form を比較しているので合うわけが無い
3. parent.length はイベントが起こった所の要素数
4. parent.querySelectorAll はイベントが起こった所のform要素から探している
   また少なくとも parent.querySelectorAll("input")[0].disabled = true; と書かないと一つもdisabled にならない
5. parent.querySelectorAll("input") は複数要素を返すため、指定方法が違う

Comments

[Scarlett]

確認、遅くなりました。
回答ありがとうございます。

理由など書いていただいていて、大変勉強になります。
ご指摘箇所を自分でも、もう少し調べてみます。
大変助かりました、ありがとうございました！！