javascript - 使用 JavaScript 禁用 HTML 所需输入 onchange 单选按钮

标签 javascript jquery html

你能帮我设置一下,这样它就不会检查隐藏的必填输入框是否已填写吗?

我有一个带有取货和送货单选按钮的订单系统。 当他们选择取件时,我让它隐藏了地址、城市、州和邮政编码的输入框。 交付时需要这些盒子。因为它们是必需的,所以即使框被隐藏,它仍然会检查框是否已填充。

我这里的脚本函数可以隐藏输入框,但它不会让我继续前进,因为它仍在检查输入框是否已填充。

< 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 &nbsp
      <input onchange="showFunctionPickup()" type="radio" class="form-group" id="pickup" name="delivery"> Pick Up &nbsp
      <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>

最佳答案

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;
  }

关于javascript - 使用 JavaScript 禁用 HTML 所需输入 onchange 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49862350/

相关文章:

javascript - Accordion 切换开关打开/关闭

JavaScript 和正则表达式

javascript - 从 jQuery 中的字符串解析 JSON

javascript - 如何通过javascript清除输入类型="datetime"

html - 提交按钮上带有文本的 Bootstrap 刷新图标

javascript - 用于多列列表的 JQuery slideToggle

javascript - 如何在 openlayers3 中更改图像颜色?

javascript - JavaScript 中匿名函数的作用域问题

javascript - 使用 "on"的 jQuery 多选委托(delegate)事件

javascript - 使用 jQuery 切换复选框 css 样式