仅在单击复选框时才将组合框设为必填字段

Question

我有一个复选框，选中后会显示一个隐藏的组合框。当我提交表单并且未选中复选框（组合框仍处于隐藏状态）时，它仍具有隐藏的组合框作为“必填”字段。这是我的代码：

$(function() {
  var checkbox = $("#hascustpo");
  var hidden = $("#custpo");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      checkbox.attr("required", true);
      hidden.show();
    } else {
      hidden.hide();
      checkbox.attr("required", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
   Has Customer PO
 </label><br>
<div id="custpo">
  <label>Customer PO Number <b style="color:red;">*</b></label>
  <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
    <option disabled selected>-- Customer PO Number</option>
    <option>AUTO PO NUM | DESCRIPTION</option>
  </select>
  <br>
</div>

Answer 1

首先，我想您想为隐藏元素而不是复选框设置必需的内容。

第二，您最好为此使用prop :) http://api.jquery.com/prop/

另一种方法是removeAttr，但是prop对于您的情况更好。参见.prop('checked',false) or .removeAttr('checked')?

---

        $(function() {
          var checkbox = $("#hascustpo");
          var hidden = $("#custpo");
          var input = $("#txtfield");
          hidden.hide();
          checkbox.change(function() {
              if (checkbox.is(':checked')) {
                  input.prop("required", true);
                  hidden.show();
              } else {
                  hidden.hide();
                  input.prop("required", false);
              }
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>
       <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
       Has Customer PO
     </label><br>
     <div id="custpo">
       <label>Customer PO Number <b style="color:red;">*</b></label>
         <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
           <option disabled selected>-- Customer PO Number</option>
           <option>AUTO PO NUM | DESCRIPTION</option>
         </select>
         <br>
     </div>
     <button type="submit">Submit</botton>
</form>

浏览器验证Select元素（如果可见）：

Answer 2

您需要一个函数来检测何时提交表单并在选中复选框时检查组合框的值：

$(function() {
  var checkbox = $("#hascustpo");
  var hidden = $("#custpo");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      checkbox.attr("required", true);
      hidden.show();
    } else {
      hidden.hide();
      checkbox.attr("required", false);
    }
  });
  
  $("form").submit(function (e) {
    if($("#hascustpo").is(':checked') && $("#custpo option:selected" ).val() == 0){
      e.preventDefault();
      alert("Please select an item from this list");
    }
    
  });
});

<form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
   Has Customer PO
 </label><br>
<div id="custpo">
  <label>Customer PO Number <b style="color:red;">*</b></label>
  <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
    <option value="0" disabled selected>-- Customer PO Number</option>
    <option value="1">AUTO PO NUM | DESCRIPTION</option>
  </select>
  <br>
</div>
     <button type="submit">Submit</botton>
</form>