無法啓用基於第一個選擇菜單的值的其他選擇菜單

Question

我有2個標籤爲連接模式和Ip版本的下拉選擇菜單項。根據連接模式（靜態）中的值，應該啓用Ip版本，但如果我在連接模式中選擇「dhcp」，則應該再次禁用Ip版本。我提到這個例子Enable/Disable Input based on selection (jQuery)

但它不適用於我的情況。不同之處在於我使用的是jQuery UI菜單項，這些菜單項在語法上啓用和禁用不同。

這裏是HTML的一部分： -

<label for="cm_0">Connection Mode</label> 

     <select id="cm_0"> 
      <option value="static">static</option> 
      <option value="dhcp">DHCP</option> 
     </select> 
     <div class="clear"></div> 
    <div class="clear"></div> 
    <label for="ipv_0">IP Version</label> 

     <select id="ipv_0"> 
      <option selected>IPv4</option> 
      <option>IPv6</option> 
     </select> 

這是jQuery的部分： -

$("#cm_0,#cm_1,#ipv_0,#ipv_1").selectmenu({ 
     width:153, 
     disabled:true 
    }); 

/*based on the stackoverflow link i shared*/ 
$("#cm_0").change(function(){ 
    if($("#cm_0").val() === "static") { 
     $("#ipv_0").selectmenu("option","disabled",false); 
     console.log("static chosen"); 
    } 
    else{ 
     $("#ipv_0").selectmenu("option","disabled",true); 
    } 
    }).trigger('change'); 

Answer 1

使用selectmenuchange事件：

$("#cm_0").selectmenu({ 
 
    width:153, 
 
}); 
 

 
$("#ipv_0").selectmenu({ 
 
    width:153, 
 
    disabled:true 
 
}); 
 

 
$("#cm_0").on("selectmenuchange", function(){ 
 
    if($("#cm_0").val() === "static") { 
 
    $("#ipv_0").selectmenu("option","disabled",false); 
 
    } 
 
    else{ 
 
    $("#ipv_0").selectmenu("option","disabled",true); 
 
    } 
 
}).trigger('selectmenuchange');

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<label for="cm_0">Connection Mode</label> 
 

 
     <select id="cm_0"> 
 
      <option value="static">static</option> 
 
      <option value="dhcp">DHCP</option> 
 
     </select> 
 
     <div class="clear"></div> 
 
    <div class="clear"></div> 
 
    <label for="ipv_0">IP Version</label> 
 

 
     <select id="ipv_0"> 
 
      <option selected>IPv4</option> 
 
      <option>IPv6</option> 
 
     </select>