Perlで繰り返し処理を行う際のJavascriptの記述

Question

前提・実現したいこと

Perlはある程度理解できるのですが、Javascriptはつい最近触り始めたばかりです。

「チェックボックスにチェックが入ると、対応のテキストエリアを非活性にしたい」と考え、
わからないなりに色々調べてみた所、動作自体は達成出来たのですが
Javascriptの記述がデータの数だけ同じ構文を増やす方法しかわかっていない状況です。

拙い内容で大変恐縮ですが、Javascriptをまとめる方法がございましたらご教示頂きたくお願い致します。

Perl側

# @cntはその時々のデータ量で変動します
my $cnt=@cnt;

# html部分
for(my $i=0; $i<$cnt; $i++){
  print "<p><input type=\"checkbox\" id=\"check${i}\"><input type=\"text\" id=\"text${i}\"></p>\n";
}

# Javascript部分
for(my $i=0; $i<$cnt; $i++){
  print "document.getElementById(\'check${i}\').onclick = function(){\n";
  print "if(check${i}.checked){\n";
  print "text${i}.disabled = true\;\n";
  print "}\n";
  print "else{\n";
  print "text${i}.disabled = false\;\n";
  print "}\n";
}

Javascriptのソースコード

document.getElementById('check1').onclick = function(){
  if(check1.checked){
    text1.disabled = true;
    }
  else{
    text1.disabled = false;
    }
}
document.getElementById('check2').onclick = function(){
  if(check2.checked){
    text2.disabled = true;
    }
  else{
    text2.disabled = false;
    }
}
// 以下check3用、check4用…とデータの数だけ続いてしまいます

Answer 1

簡単に済ませるなら、Perlの最初のループで onchange="text$[i}.disabled=this.checked" をチェックボックスに足すだけでいいでしょう。

ちょっと洗練された手法は、1つだけイベントリスナを登録して、ノードの相対位置を利用して対応するテキストフィールドを見つけることです。例:

document.addEventListener('change', e => {
  if (e.target.type == 'checkbox')
    e.target.nextSibling.disabled = e.target.checked;
});

Comments

[bis_don]

詳しくありがとうございます！
早速それぞれの内容を調べて、少し意味が理解出来てきたところです。
相対位置を利用するというやり方は別の場所でも生かせそうで勉強になります。

Answer 2

• HTML要素にクラスをつけるてグルーピングする
• idではなく相対位置で処理する

<script>
document.addEventListener('click',e=>{
  if(e.target.closest('.ch')){
    e.target.nextElementSibling.disabled=e.target.checked;
  }
});
</script>

<p><input type="checkbox" id="check1" class="ch"><input type="text" id="text1"></p>
<p><input type="checkbox" id="check2" class="ch"><input type="text" id="text2"></p>
<p><input type="checkbox" id="check3" class="ch"><input type="text" id="text3"></p>

Comments

[bis_don]

詳しくご提示頂きありがとうございます！
まさに想定していた通りの挙動が出来たのでとても助かりました。
所で、非常に心苦しいのですが、宜しければもう一つだけお伺い出来ればと存じます。

質問を簡略化しようとして省いてしまったのですが、本来は二つのテキストエリアを非活性にしたかったのです。
<p><input type="checkbox" id="check1" class="ch"><input type="text" id="text1"><input type="text" id="sample1"></p>
自分なりに調べたところ、前の要素や親要素として参照するやり方がある事はわかったのですが、
このように次と次の次まで対応するにはどのように記述すれば宜しいでしょうか。

[yambejp]

後ろ方向にすべて適用したいならこんな感じで
<script>
document.addEventListener('click',e=>{
const t=e.target;
if(t.closest('.ch')){
let n=[...t.closest('p').querySelectorAll('input')];
n.filter((_,x)=>x>n.indexOf(t)).forEach(x=>x.disabled=t.checked);
}
});
</script>

<p><input type="checkbox" id="check1" class="ch"><input><input></p>
<p><input type="checkbox" id="check2" class="ch"><input><input></p>
<p><input type="checkbox" id="check3" class="ch"><input><input></p>

[bis_don]

度々のご回答、誠に恐縮です。
最初の件と合わせていずれも想定の通りの挙動で、とても勉強になりました。
今後の参考とさせて頂きます！

Answer 3

htmlの関係性が分からないですが、「次、前の要素」「兄弟要素」などが取得できるので増やさなくても1ソースで対応可能です。
「チェックボックスから見たテキストエリアの位置」で辿ってください。

data属性を使い、idの命名に法則性を持たせれば要素の位置関係なく対応可能です。
（法則性持たせなくてもそのままテキストエリアのid入れても良いけど）

Comments

[bis_don]

ありがとうございます！
data属性と言うものは詳しく存じ上げておりませんでした。
早速今後の参考に勉強させて頂きます。