仅当单击复选框时，组合框才有必填字段

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>