Используйте поле со списком для обязательного поля, только если установлен флажок

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

Вам нужна функция, чтобы определить, когда форма отправлена, и проверить значение поля со списком, когда флажок установлен:

$(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>

Answer 2

Прежде всего, я думаю, вы хотите установить необходимый для скрытого элемента, а не флажок.

Во-вторых, для этого лучше использовать опору :) http://api.jquery.com/prop/

Другой способ будет removeAttr, но prop лучше для вашего случая. См. .prop («проверено», false) или .removeAttr («проверено»)?

---

        $(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, если он виден: