foreach循环中jQuery按钮点击事件仅首行生效如何解决

代码失效是三个问题叠加导致的：

• ID全局重复：HTML标准要求单页面内id属性必须唯一，你在@foreach循环里给所有行的tr、表单、按钮都写了固定id，渲染完页面会出现大量重名的trTab、form1、valider、refuser元素，jQuery的#id选择器默认只会匹配第一个找到的元素，所以后面所有行的按钮根本没绑定上点击事件。
• 查找范围错误：就算事件绑定成功，原代码是全页面范围查找#refuser和#form1，不管点哪行的按钮，操作的永远是第一行的元素，不会对当前行的目标生效。
• 表格结构非法：你把<form>标签直接插在<tr>和<td>中间，不符合表格嵌套规则，浏览器渲染时会自动把这些form标签挪到table外面，DOM层级直接错乱，后续查找元素必然出错。

第一步：调整Blade模板代码 #

把所有重复的固定id替换为class，同时调整form标签的嵌套位置，保证表格结构合法：

@foreach($fiche as $f)
<tr class="fiche-row">
    <td>{{ $f->Date }}</td>
    <td>{{ $f->activite1 }}</td>
    <td>{{ $f->heuresEffectu }}</td>
    <td>{{ $f->Poids }}</td>
    <td>{{ $f->ecart }}</td>

    <td>
        <form method="post" action="" class="form-valider">
            {{ csrf_field() }}
            <input type="hidden" name="id" value="{{$f->id}}">
            <button type="submit" class="btn btn-primary btn-valider">V</button>
        </form>
    </td>
    <td>
        <form method="post" action="" class="form-refuser">
            <button type="submit" class="btn btn-primary btn-refuser">R</button>
        </form>
    </td>
</tr>
@endforeach

第二步：重写jQuery事件逻辑 #

用class作为选择器绑定事件，查找目标元素时只在当前点击按钮所在的行范围内检索，避免操作到其他行的元素：

<script>
// 给所有V按钮绑定点击事件，禁止用重复id做选择器
$(".btn-valider").click(function(e) {
    // 如果需要先做交互再提交表单，放开下面这行阻止默认提交行为
    // e.preventDefault();
    
    // 先定位当前按钮所在的表格行
    const $currentRow = $(this).closest('.fiche-row');
    // 仅在当前行范围内查找R按钮，切换禁用状态
    const $refuserBtn = $currentRow.find('.btn-refuser');
    // 操作disabled/checked这类布尔属性统一用prop，不要混用attr避免状态不同步
    $refuserBtn.prop("disabled", !$refuserBtn.prop("disabled"));
    // 仅在当前行范围内查找目标表单，切换显示隐藏状态，这里默认切换R按钮所在表单，需要切换V自身表单就把选择器换成.form-valider
    $currentRow.find(".form-refuser").toggle();
});
</script>

内容的提问来源于stack exchange，提问作者lili