Javastript получить "номер входа" из класса с помощью флажка

У меня есть таблица с 2 столбцами: флажок и количество.

<form action="{% url 'create-order' %}" method="POST">
    {% csrf_token %}
    <table class="table table-responsive table-borderless">
        <thead>
            <th>&nbsp;</th>
            <th>Quantity</th>
        </thead>
        <tbody>
            {% for item in items %}
            <tr class="align-middle alert border-bottom">
                <td>
                    <input type="checkbox" id="check" name="item" value="{{ item.id }}" onclick={changeQuantityState(this)}>
                </td>
                <td>
                    <input class="input" name="quantity" id="qnt" min="0" value=0 type="number" disabled>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="submitButton">
        <button type="submit" class="lgbtn green">Go to order</button>
    </div>
</form>

У меня есть обработчик для чекбокса: если чекбокс отмечен, то я могу выбрать количество. В противном случае количество отключено.

function changeQuantityState(checkbox) {
    checkbox.addEventListener('change', function(event) {
        var quantity = document.getElementById('qnt');
        if (event.currentTarget.checked) {
            quantity.disabled = false;
            quantity.value = 1;
        }
        else {
            quantity.disabled = true;
            quantity.value = 0;
        }
    });
}

Мне нужно изменить эту строку: var quantity = document.getElementById('qnt'); потому что мне нужно количество для текущей строки в таблице, для текущего чекбокса, но эта строка кода всегда возвращает первое количество

Ваш document.getElementById('qnt') всегда будет возвращать первый элемент, соответствующий запросу. У вас всегда должен быть только один элемент, имеющий определенный ID. Если ID присутствует несколько раз, измените его на что-то другое, например, на класс. Идентификаторы должны быть уникальными.

Вот быстрый пример того, как использовать event.currentTarget для получения необходимого ввода. Я использовал parentElement.parentElement для получения элемента <tr>, на котором я использую querySelector для выбора ввода, который находится рядом с флажком.

const checkboxes = document.querySelectorAll('.checkbox');

const handleCheckboxChange = (ev) => {
    const quantityInput = ev.currentTarget.parentElement.parentElement.querySelector('.quantity');
  
  if (ev.target.checked) {
    console.log('Would enable input', quantityInput);
    // enable input
  } else {
    console.log('Would disable input: ', quantityInput);
    // disable input
  }
}

checkboxes.forEach((c) => c.addEventListener('change', handleCheckboxChange));
<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox" /></td>
      <td><input placeholder="Quantity" class="quantity" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox" /></td>
      <td><input placeholder="Quantity" class="quantity" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox" /></td>
      <td><input placeholder="Quantity" class="quantity" /></td>
    </tr>
  </tbody>
</table>

Вернуться на верх