当同一行中的另一个Cell在Javascript中具有值时，验证要成为必需的单元格

Question

In my form, there are several rows which have two input field. I want to get the required error in quantity cell if the product cell has selected. This should happen for the each and every row. Currently, I have a jquery function which I have used for each and every row separately. I want a single function which can work for every row. Hope someone will help to solve my problem. Thank you.

I have attached my code for the reference

$('#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>

</div>

Answer 1

Edited answer -- didn't originally notice that you were trying to make a different element required based off of which was selected, which makes way more sense.

    $('.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);
    }
});

I changed the class selector, so for this to work you would have to add the 'productSelect' class to your html. Using event.target lets you decipher which element was actually edited and modify it without having to declare a function for every element. I haven't tested this but I think it is probably close to what you're after.