僅在單擊復選框時才將組合框設為必填字段

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）或.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>