チェックボックスとフォームの活性化で数が増えて行った時

チェックボックスと入力フォームを連動させたいのですが、数が増えて行った時の記述が分からず困っています。

html
1<tbody>
2    <tr>
3        <td><input id="Check01" type="checkbox" class="Check"><label for="Check01"></label>
4        <td><input class="" type="number" id="Check01" name="formText"></td>
5    </tr>
6    <tr>
7        <td><input id="Check02" type="checkbox" class="Check"><label for="Check01"></label>
8        <td><input class="" type="number" id="Check01" name="formText"></td>
9    </tr>
10</tbody>

JavaScript
1    <script>
2        $(function() {
3            
4        var submitText = $('[name=formText]');
5
6            submitText.attr('disabled', 'disabled');
7
8            $('.Check').click(function() {
9                if ( $(this).prop('checked') == false ) {
10                    submitText.attr('disabled', 'disabled');
11                } else {
12                    submitText.removeAttr('disabled');
13                }
14            });
15        });
16    </script>

Check01にチェックが入ったらCheck01の入力フォームが解放されて
Check02にチェックが入ったらCheck02の入力フォームに解放されるようにしたいのですが今のままだとチェックを入れると全部の入力フォームが解放されてしまいます。
ボックスの数はどんどん増えてくのでidで拾ってくやり方は難しく、親要素を拾って・・・のようなやり方かなと思うのですがどのように記述したらいいかご教示いただけると幸いです。

arcxor

2022/06/20 18:22

複数の type=number の input 要素に対して、同じ name 属性値 formText を付けているのはどういう意図ですか？

njsjsjsjsjsjsja

2022/06/20 18:27

すみません。JS初心者なもので・・・ここは特に意図がないのでこの部分は無視していただいて大丈夫です

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

回答1件

ベストアンサー

closest() で先祖要素を拾って、find() で子孫要素を拾い直してください。

js
1  $('.Check').click(function() {
2    const number = $(this).closest('tr').find('input[type="number"]');
3    if (!$(this).prop('checked')) {
4      number.attr('disabled', 'disabled');
5    } else {
6      number.removeAttr('disabled');
7    }
8  });

https://codepen.io/arcxor/pen/ZErNLLz

Check02だけ最初からデフォルトでチェックが入っていてフォームが開放されてる状態にすることは可能でしょうか？

html
1<table>
2  <tbody>
3    <tr>
4      <td><input id="Check01" type="checkbox" class="Check"></td>
5      <td><input id="Number01" type="number"></td>
6    </tr>
7    <tr>
8      <td><input id="Check02" type="checkbox" class="Check" checked></td>
9      <td><input id="Number02" type="number"></td>
10    </tr>
11  </tbody>
12</table>

js
1$(function() {
2  function toggleNumber() {
3    const number = $(this).closest('tr').find('input[type="number"]');
4    if (!$(this).prop('checked')) {
5      number.attr('disabled', 'disabled');
6    } else {
7      number.removeAttr('disabled');
8    }
9  }
10
11  const checkboxes = $('.Check');
12  checkboxes.on('click', toggleNumber);
13  checkboxes.each((idx, checkbox) => {
14    toggleNumber.call(checkbox);
15  });
16});