页面刷新后，为什么我的bootstrap折叠功能不起作用？

时间：2019-06-24 09:56:12

标签： javascript html bootstrap-4

我正在写一个小页面，其中包含用于网络设置的表格。可以在DHCP模式和静态模式之间切换。在DHCP模式下，运行JS函数以折叠包含IP和子网掩码输入的div。但是，刷新页面后，收合功能无法完全使用。我可以看到该函数在同一函数中被称为IP和子网字段被禁用，只是崩溃失败了。

如果我先按“静态”选项（将再次显示字段），则折叠将再次开始工作。 

  <!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Control Panel</title>
</head>
<body>

  <form> 



    <label class="font-weight-bold text-secondary">Network Mode</label>
    <br>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-primary" onchange="disableStatic()">
        <input type="radio" name="networkMode" id="DHCP"  autocomplete="off" value="0">DHCP
      </label>
      <label class="btn btn-primary" onchange="enableStatic()">
        <input type="radio" name="networkMode" id="static" autocomplete="off" value="1" checked>Static
      </label>
    </div>

    <br>
    <br>

    <div class="ip-subnet-params">


    <label for="ip1" class="font-weight-bold text-secondary">IP Address</label>
    <div class="form-row">
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="ip1" placeholder="IP_1" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
       <input type="number" min="0" max="255" maxLength="3" class="form-control" id="ip2" placeholder="IP_2" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="ip3" placeholder="IP_3" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="ip4" placeholder="IP_4" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
    </div>

    <br>

    <label for="sub1" class="font-weight-bold text-secondary">Subnet Mask</label>
    <div class="form-row">
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="sub1" placeholder="Subnet_1" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="sub2" placeholder="Subnet_2" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="sub3" placeholder="Subnet_3" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
      <div class="col">
        <input type="number" min="0" max="255" maxLength="3" class="form-control" id="sub4" placeholder="Subnet_4" oninput="javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
      </div>
    </div>
</div>


      <br>

      <label for="mac1" class="font-weight-bold text-secondary">MAC Address</label>
      <div class="form-row">
        <div class="col">
          <input type="text" maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac1" placeholder="MAC_1">
        </div>
        <div class="col">
          <input type="text"maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac2" placeholder="MAC_2">
        </div>
        <div class="col">
          <input type="text"maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac3" placeholder="MAC_3">
        </div>
        <div class="col">
          <input type="text"maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac4" placeholder="MAC_4">
        </div>
        <div class="col">
          <input type="text"maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac5" placeholder="MAC_5">
        </div>
        <div class="col">
          <input type="text"maxLength="2" pattern="^[^g-zG-Z]{2}$" class="form-control" id="mac6" placeholder="MAC_6">
        </div>
      </div>
      <br>
      <button type="button" class="btn btn-warning btn-block">Submit</button>
  </form>


  <script>

    function disableStatic() {
        document.getElementById("ip1").disabled = true;
        document.getElementById("ip2").disabled = true;
        document.getElementById("ip3").disabled = true;
        document.getElementById("ip4").disabled = true;
        document.getElementById("sub1").disabled = true;
        document.getElementById("sub2").disabled = true;
        document.getElementById("sub3").disabled = true;
        document.getElementById("sub4").disabled = true;
        $('.ip-subnet-params').collapse('hide');


      }

      function enableStatic() {
        document.getElementById("ip1").disabled = false;
        document.getElementById("ip2").disabled = false;
        document.getElementById("ip3").disabled = false;
        document.getElementById("ip4").disabled = false;
        document.getElementById("sub1").disabled = false;
        document.getElementById("sub2").disabled = false;
        document.getElementById("sub3").disabled = false;
        document.getElementById("sub4").disabled = false;
        $('.ip-subnet-params').collapse('show');
      }
  </script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

我希望页面加载时显示所有字段，并且当我按DHCP按钮时，IP和子网字段会折叠。

实际发生的是，当您按DHCP时，“ IP”和“子网”字段将禁用，但不会崩溃。按下“静态”按钮后，再次按下DHCP按钮上的折叠即可正常工作。

0 个答案:

没有答案
相关问题
最新问题