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

Posted 2023-05-09

【中文标题】当同一行中的另一个单元格在 Javascript 中具有值时，验证一个单元格是不是成为必需的

【英文标题】：Validating a Cell to become required when another Cell in the same row has a value in Javascript当同一行中的另一个单元格在 Javascript 中具有值时，验证一个单元格是否成为必需的

【发布时间】：2019-04-10 02:38:45

【问题描述】：

在我的表单中，有几行有两个输入字段。如果选择了产品单元格，我想在数量单元格中获得所需的错误。这应该发生在每一行。目前，我有一个 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>

【问题讨论】：

使用类而不是id的$('.select2').change(function () 来启动你的模组

@iggsfolly当我使用类时，我在选择特定的单个产品单元格时，我在每行中获取错误消息时。 span>

所以现在在jquery手册中查找.next()

@RiggsFolly $('.select2').change(function () if ($(this).val() != null ) $(this).next('input').prop('required',true); ); 我已按照您的指示完成此操作。但无法获得正确的输出

【参考方案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 可以让您破译哪个元素实际被编辑并修改它，而无需为每个元素声明一个函数。我尚未对此进行测试，但我认为它可能接近您所追求的。

【讨论】：

感谢您的回复。但不幸的是，它不起作用。我也试过elementID.split 而不是elementID.replace。但没有得到输出。

如果在 elementID 声明后记录它的值会发生什么？我也觉得我应该写 [replace("product", "");] -- no #

嗨。感谢您的支持。我做了一些小改动，现在它工作得很好。我在下面提到了正确的解决方案。谢谢

【参考方案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);
  
);

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