如何仅启用涉及行的按钮？

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。您可以使用传递给处理程序函数的事件来获得对button的引用。从那里可以使用closest()和find()获得最近的公共tr。试试这个：

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

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