I have a table with 2 columns: checkbox and quantity.

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

I have a handler for the checkbox: if checkbox is checked, then I can select the quantity. Otherwise, the quantity disabled.

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;
        }
    });
}

I need change this line: var quantity = document.getElementById('qnt'); because I need the quantity for the current row in the table, for the current checkbox, but this code line always return first quantity

CodePudding user response：

Your document.getElementById('qnt') will always return the first element that matches the query. You should always have only one element that has a specific ID. If the ID is present multiple times change that to something else, like a class. IDs must be unique.

Here's a quick example on how to use event.currentTarget to get the input you need. I've used parentElement.parentElement to get the <tr> element on which I use querySelector to select the input that's next to the checkbox.

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"  /></td>
      <td><input placeholder="Quantity"  /></td>
    </tr>
    <tr>
      <td><input type="checkbox"  /></td>
      <td><input placeholder="Quantity"  /></td>
    </tr>
    <tr>
      <td><input type="checkbox"  /></td>
      <td><input placeholder="Quantity"  /></td>
    </tr>
  </tbody>
</table>