javascript - 避免重复的 JavaScript

Question

我有一个 HTML 表单，其中大约有 30 行类似的行。每行都是这样的:

<tr>
  <td>Car Park</td>
  <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td>
  <td><input type="text" id="local_parking_t" name="amenity_text[]" value="Car park"></td>
</tr>

如果未选中该复选框，则需要禁用该文本框以避免将其值传递给随后的 mySQL 查询。我可以用这个 javascript 来完成一行:

document.getElementById('local_parking').onchange = function() {
  document.getElementById('local_parking_t').disabled = !this.checked;
};

然而，使用不同的 ID 重复 javascript 30 次似乎非常困惑。有更好的办法吗？

Answer 1

捕获每个复选框并绑定(bind)change事件监听器。如果用户选中指定的复选框 - 启用相应的文本输入。

var checkboxes = document.querySelectorAll('input[type=checkbox]'),
    inputs = document.querySelectorAll('input[type=text]');
    
    [...checkboxes].forEach((v,i) => v.addEventListener('change', function(){
      inputs[i].disabled = !this.checked;
    }));

<tr>
  <td>Car Park</td>
  <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td>
  <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car park"></td>
</tr>
<br>
<tr>
  <td>Some txt</td>
  <td><input type="checkbox" id="local_parking" name="amenity[]" value="local_parking"></td>
  <td><input type="text" id="local_parking_t" disabled name="amenity_text[]" value="Car "></td>
</tr>