使用JavaScript禁用HTML的必需輸入onchange單選按鈕
[英]Disable HTML's required input onchange radio button with JavaScript
問題描述
您能幫我做到這一點，以便它不檢查是否已填寫HIDDEN必需的輸入框嗎？
我有一個具有取件和交貨單選按鈕的訂單系統。 當他們選擇“代答”時，我會將其隱藏在“地址”，“城市”，“州”和“郵政編碼”的輸入框中。 這些盒子是交貨所必需的。 因為它們是必需的，所以即使隱藏了方框，它仍會檢查方框是否已填充。
我在這里具有的腳本功能可以隱藏輸入框，但是它不會讓我繼續前進，因為它仍在檢查輸入框是否已填充。
< script > function showFunctionDelivery() { var x = document.getElementById("deliveryStuff"); var y = document.getElementById("pickupStuff"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "block"; } } function showFunctionPickup() { var x = document.getElementById("deliveryStuff"); var y = document.getElementById("pickupStuff"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "none"; } } < /script> < script src = "assets/js/script.js" > < /script> < / body >
<body> <form action="/shipping" method="POST"> <div class="container"> <h1>Delivery/Pick Up</h1> <hr> <input onchange="showFunctionDelivery()" type="radio" class="form-group" id="delivery" name="delivery" checked> Delivery   <input onchange="showFunctionPickup()" type="radio" class="form-group" id="pickup" name="delivery"> Pick Up   <br> <!---Needed for order name, date time.--> <div class="row" id="pickupStuff"> <div class="col-sm-3"> Name: ex. John Smith <input required type="text" pattern="\\D+" id="name" class="form-control" value="" name="name"> </div> <div class="col-sm-3"> Desired Date: <input required type="date" id="date" class="form-control" name="date"> </div> <div class="col-sm-3" id="time"> Desired Time: <select class="form-control"> <option value="7am">7am</option> <option value="8am">8am</option> <option value="9am">9am</option> <option value="10am">10am</option> <option value="11am">11am</option> <option value="12pm">12pm</option> <option value="1pm">1pm</option> <option value="2pm">2pm</option> <option value="3pm">3pm</option> <option value="4pm">4pm</option> </select> </div> </div> </div> <br> <!--delivery stuff--> <div class="container" id="deliveryStuff"> <div class="row"> <div class="col-sm-3" id="deliveryOp"> Address: ex. 12345 Plain Dr <input required type="text" id="address" pattern="\\d+\\s\\D+" class="form-control" value="" name="address"> </div> <div class="col-sm-3" id="deliveryOp"> City: ex. Austin <input required type="text" id="city" pattern="\\D+" class="form-control" value="" name="city"> </div> <div class="col-sm-3" id="deliveryOp"> State: <select required class="form-control" id="state" name="statename"> <option value="">Please Select One</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Etc.</option> </select> </div> <div class="col-sm-3" id="deliveryOp"> Zip Code: ex. 12345 <input required id="zip" type="text" pattern="\\d{5}" class="form-control" value="" name="zipcode"> </div> </div> </div><br><br> <script> let d = document.getElementById("delivery"), p = document.getElementById("pickup"); </script> <footer class="container-fluid text-center"> <a href="/billing"><button type="submit" class="btn btn-danger">Next</button></a> </footer> </form> </body>
2 個解決方案
解決方案1
1 2018-04-16 17:08:54
在showFunctionPickUp()方法showFunctionPickUp()地址，城市，州和郵政編碼的必需屬性設置為false。
function showFunctionPickup() {
var x = document.getElementById("deliveryStuff");
var y = document.getElementById("pickupStuff");
var address = document.getElementById("address");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
x.style.display = "none";
address.required = false;
city.required = false;
state.required = false;
zip.required = false;
}
解決方案2
0 2018-04-16 16:51:52
您可以使用removeAttr()方法刪除required屬性。 您可以按以下方式使用它：
$("#address").removeAttr('required');
要再次添加必填字段，請使用attr()方法作為
$("#address").attr('required','');
在 JavaScript 中選中單選按鈕時如何禁用輸入文本？
[英]How to disable input text while the radio button is checked in JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.