javascript - 当另一个字段不为空时，输入字段将成为必需字段

Question

我有一个包含多行的表单，其中包含一对产品和数量输入字段。我希望当同一行中的产品字段不为空时需要数量字段。我使用了 Jquery 函数，如下所示。但它无法正常工作。希望有人能帮助我。

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

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

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

   <form role="form" action="#" method="post" role="form" id="orderform">             

                            <tr>

                              <td><select class="form-control select2 productSelect" 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>

                          </tr>

                          <tr>
                            <td><select class="form-control select2 productSelect" 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>

                        </tr>

                        <tr>
                          <td><select class="form-control select2 productSelect" 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>

                      </tr>

     <div class="col-md-6">
    <div class="box-header">
      <input class="btn btn-primary" name="sub" type="submit"  value="Submit"/>
    </div>
  </div>

Answer 1

您正在拆分 ID，但在选择器上，您没有包含它。

正确的做法是

$('#quantity' + numberPart[1]).prop('required', true);

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form role="form" action="<?php echo base_url(); ?>index.php/order/addOrder" method="post" role="form" id="orderform">

  <tr>

    <td>
      <select class="form-control select2 productSelect" 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>

  </tr>

  <tr>
    <td>
      <select class="form-control select2 productSelect" 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>

  </tr>

  <tr>
    <td>
      <select class="form-control select2 productSelect" 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>

  </tr>

  <div class="col-md-6">
    <div class="box-header">
      <input class="btn btn-primary" name="sub" type="submit" value="Submit" />
    </div>
  </div>