テーブル構造の入力フォームで変更のある列のみをsubmitしたい

Question

前提・実現したいこと

複数のデータを纏めてsubmitしてdbを更新するプログラムを作成しています。
三つの項目の内一つでも更新があればsubmitしたいのです。

該当のソースコード

<form method="post" action="" id="table_form">
<tr table_id="1">
 <td><input type="checkbox" name="table[1][check]" value="1"></td>
 <td><select name="table[1][select]">
  <option value="" selected>選択してください</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
 </select></td>
 <td><input type="text" name="table[1][text]"></td>
</tr>

<tr table_id="2">
 <td><input type="checkbox" name="table[2][check]" value="2"></td>
 <td><select name="table[2][select]">
  <option value="" selected>選択してください</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
 </select></td>
 <td><input type="text" name="table[2][text]"></td>
</tr>

<tr table_id="3">
 <td><input type="checkbox" name="table[3][check]" value="3"></td>
 <td><select name="table[3][select]">
  <option value="" selected>選択してください</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
 </select></td>
 <td><input type="text" name="table[3][text]"></td>
</tr>
</form>
<button class="submit_button">

試したこと

複数あるチェックボックスから、チェックされているものという指定は下記のjsで取得できるのは分かったのですが、複数の要素がある場合どのようにすれば良いかわからない状態です。
let check = $('input[name=check]:checked').map(function(){
return $(this).val()
}).get();

Comments

[yambejp]

tableタグがない、buttonがformの中にないのをなんとかしてください。
それぞれが独立したtableとformなのか、
全部で一つのtableとformなのか判断が付きません
チェックボックス、セレクトボックス、テキストボックスのどれかが
デフォルト値と違えばsubmitボタンが押せるという仕様ですか？

Answer 1

form 属性が指定されているものとして

<button class="submit_button" form="table_form">

https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

すべきことはチェックボックスによる disabled の制御だけです。無効な状態の要素は送信されません。

$(function() {
  $('tr input[type="checkbox"]').on('change', function(event) {
    const target = $(event.target);
    $('select,input[type="text"]', target.closest('tr')).prop('disabled', !target.prop('checked'));
  }).trigger('change');
});

https://developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement#Properties

Answer 2

画面内にある全てのチェックボックスであれば、input[type="checkbox"]で取れそうに思います。
jQueryリファレンス：[ 属性名 = '値' ]