javascript - 仅当单击复选框时才将组合框设置为必填字段

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 元素是否可见: