Проверка Ячейки становится обязательной, когда другая Ячейка в той же строке имеет значение в Javascript

Question

В моей форме есть несколько строк, которые имеют два поля ввода. Я хочу получить требуемую ошибку в ячейке количества, если ячейка продукта выбрана. Это должно происходить для каждого ряда. В настоящее время у меня есть функция jquery, которую я использовал для каждой строки отдельно. Я хочу одну функцию, которая может работать для каждой строки. Надеюсь, кто-нибудь поможет решить мою проблему. Спасибо.

Я приложил свой код для ссылки

$('#product1').change(function () {
  if ($(this).val() != null ) {
    $('#quantity1').prop('required',true);
  }
});

$('#product2').change(function () {
  if ($(this).val() != null ) {
    $('#quantity2').prop('required',true);
  }
});
$('#product3').change(function () {
  if ($(this).val() != null ) {
    $('#quantity3').prop('required',true);
  }
});

                            <tr>

                              <td><select class="form-control select2 error" name="product1" style="width: 100%" id="product1">
                                <option disabled selected value> -- select a Product -- </option>
                                <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>
                               
                              </select>
                            </td>
                            <td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>
                            <td><input  class="form-control" name="freeIssue1" id="freeIssue1" type="text" /></td>
                            <td align="center"><button  class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
                          </tr>

                          <tr>
                            <td><select class="form-control select2 error" name="product2" style="width: 100%" id="product2">
                              <option disabled selected value> -- select a Product -- </option>
                              <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>
                            </select>
                          </td>
                          <td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>
                          <td><input  class="form-control" name="freeIssue2" id="freeIssue2" type="text" /></td>
                          <td align="center"><button  class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
                        </tr>
                        
                        <tr>
                          <td><select class="form-control select2 error" name="product3" style="width: 100%" id="product3">
                            <option disabled selected value> -- select a Product -- </option>
                            <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>
                          </select>
                        </td>
                        <td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>
                        <td><input  class="form-control" name="freeIssue3" id="freeIssue3" type="text" /></td>
                        <td align="center"><button  class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
                      </tr>

Answer 1

Это правильное решение для моей проблемы.

$('.productSelect').change(function() {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null) {
    $('#quantity' + numberPart[1]).prop('required', true);
  }
});

Надеюсь, это кому-нибудь поможет.

Answer 2

Отредактированный ответ - изначально не замечал, что вы пытались создать другой требуемый элемент, исходя из которого был выбран, что имеет смысл.

    $('.productSelect').on('change', function(event){

    var elementID = $(event.target).attr("id");
    var numberPart = elementID.replace("#product", "");

    if ($(event.target).val() != null ) {
        $("#quantity" + numberPart).prop('required', true);
    }
});

Я изменил селектор класса, поэтому, чтобы это работало, вам нужно добавить класс productSelect в ваш html. Использование event.target позволяет вам расшифровать, какой элемент был фактически отредактирован, и изменить его, не объявляя функцию для каждого элемента. Я не проверял это, но я думаю, что это, вероятно, близко к тому, что вы ищете.