javascript - 如何只启用相关行的按钮？

Question

我有一个表，表体正在使用 foreach 循环。

 <?php foreach ($list as $test) : ?>

                    <tr>

                        <td>
                            <?= form_open_multipart('/test/update/' . $test['id'], ['class' => 'needs-validation', 'novalidate' => '']); ?>
                            <?= form_dropdown(
                                'something',
                                $option,
                                $test['smt'],
                                ['required' => '', 'id' => 'smt2', 'class' => 'd-block col-12 form-control']
                            ); ?>
                        </td>

                        <td align="right"><button class="btn btn-success btn-sm" type="submit" id="submit" disabled>SAVE UPDATE</a></td>

                        <?= form_close(); ?>
                       </tr>
                <?php endforeach; ?>

对于我做的 javascript :

 $(document).ready(function() {
   

    $('select').on('change', function() {
           $('button').attr('disabled', false);
       });
    });

当用户更改下拉列表的值时，将启用“保存更新”按钮。目前，如果用户在任何下拉菜单中进行更改，无论在哪一行，所有按钮都将启用。 我希望仅启用下拉列表已更改的行中的“保存”按钮。

Answer 1

您需要使用 DOM 遍历来查找与引发 change 事件的 select 相关的 button。您可以使用传递给处理函数的事件来获取对按钮的引用。从那里，您可以使用 closest() 然后使用 find() 获取最近的公共(public) tr。试试这个:

jQuery($ => {
  $('select').on('change', e => {
    $(e.target).closest('tr').find('button').prop('disabled', false);
  });
});

请注意使用 prop() 来设置 disabled 标志，而不是 attr()。尽可能优先使用 prop()，因为它可以避免不必要的 DOM 访问，从而提高性能。