我正在写一个小页面，其中包含用于网络设置的表格。可以在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按钮上的折叠即可正常工作。