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').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可以使您解密实际编辑的元素并对其进行修改，而不必为每个元素声明一个函数。我尚未对此进行测试，但我认为它可能与您追求的目标接近。

Answer 2

这是解决我问题的正确方法。

$('.productSelect').change(function() {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null) {
    $('#quantity' + numberPart[1]).prop('required', true);
  }
});

希望这会对某人有所帮助。

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

2 个答案: