jQueryの：崩壊は、ページの読み込み

Question

上では動作しません。このスニペットを見てみてください、ページの読み込みで

$("document").ready(function() {  
 
    $("#eth0_mode").change(function() { 
 
    $("#group").find(":input").prop("disabled", this.value === "dhcp"); 
 
    $("#group").collapse(this.value === "dhcp" ? "hide" : "show"); 
 
    }); 
 

 
    $("#eth0_mode").val("dhcp").trigger("change"); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<form> 
 
    <select class="form-control" id="eth0_mode"> 
 
    <option value="dhcp">DHCP</option> 
 
    <option value="fallback">DHCP with fallback</option> 
 
    <option value="static">Static address</option> 
 
    </select> 
 

 
    <div id="group"> 
 
    <input class="form-control" type="text" placeholder="address"> 
 
    </div> 
 
</form>

を、それは「DHCP」とトリガに選択の値を設定します変更イベント。 入力フィールドが無効になるため、イベントが実行されます。しかし、部門は崩壊していない！

しかし、別のアイテムを選択して「dhcp」に戻った場合、divは崩壊します。

なぜですか？

Answer 1

あなたはそれを動作させるために#group要素にcollapseクラスを追加する必要があります。

$("document").ready(function() { 
 
    $("#eth0_mode").change(function() { 
 
    $("#group").find(":input").prop("disabled", this.value === "dhcp"); 
 
    $("#group").collapse(this.value === "dhcp" ? "hide" : "show"); 
 
    }); 
 

 
    $("#eth0_mode").val("dhcp").trigger("change"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<form> 
 
    <select class="form-control" id="eth0_mode"> 
 
    <option value="dhcp">DHCP</option> 
 
    <option value="fallback">DHCP with fallback</option> 
 
    <option value="static">Static address</option> 
 
    </select> 
 

 
    <div id="group" class="collapse show"> 
 
    <input class="form-control" type="text" placeholder="address"> 
 
    </div> 
 
</form>