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事件：

＆＃13;

$("#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');

＆＃13;

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

＆＃13;

无法根据第一个选择菜单的值启用其他选择菜单

1 个答案: