在 db 中显示所有数据，并在 Javascript 中使用 for 循环

Question

>我有一个复选框，如果选中，它将重新启用一行中的所有输入文本框。当前状态是我只能在第一行执行此操作。

这是我的代码：

@foreach($kucings as $cat)
<tr>
<th scope="row">
<input type="hidden" name="" value="">
<input type="checkbox" id="name" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
{{$cat->name}}
</th>
<td><input type="number" id="age" value="" disabled /></td>
<td><input type="number" id="weight" value="" disabled /></td>
<td><input type="number" id="height" value="" disabled /></td>
</tr>
@endforeach

下面是我的JavaScript：

<script>
document.getElementById('name').onchange = function() {
document.getElementById('age').disabled = !this.checked;
document.getElementById('weight').disabled = !this.checked;
document.getElementById('height').disabled = !this.checked;
};
</script>

Answer 1

不能有多个元素具有相同的id。您可以拥有这样的动态id，并为每个动态添加事件侦听器。

@foreach($kucings as $key => $cat)
<tr>
<th scope="row">
<input type="hidden" name="" value="">
<input type="checkbox" id="name-{{$key}}" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
{{$cat->name}}
</th>
<td><input type="number" id="age-{{$key}}" value="" disabled /></td>
<td><input type="number" id="weight-{{$key}}" value="" disabled /></td>
<td><input type="number" id="height-{{$key}}" value="" disabled /></td>
</tr>
@endforeach
<script>
let catCount = {{count($kucings)}};
for (let i = 0; i < catCount.length; i++) {
document.getElementById('name-'+i).onchange = function() {
document.getElementById('age-'+i).disabled = !this.checked;
document.getElementById('weight-'+i).disabled = !this.checked;
document.getElementById('height-'+i).disabled = !this.checked;
}
};
</script>