Question

我有两个下拉列表如下：

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id ="1st-dd">
   <option value="23" disable_child= "y" class="disableDropdown">No Pocket</option>
   <option value="24" disable_child= "n" selected="selected"
 class="disableDropdown">1 Pocket</option>
   <option value="25" disable_child= "n" class="disableDropdown">2 Pocket</option>
 </select>  
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id = "flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option> 
 </select> 
</div>

我想要的是当我在dropdown1中选择No Pocket时，禁用下拉菜单2的选项。并启用如果在下拉列表1中选择了任何其他选项。

这是我正在尝试的内容。

$(".disableDropdown").click(function(){
 //alert($(this).attr("disable_child"));
  if( $(this).attr("disable_child") == "y") 
  {
   $("#flap-drop").attr("disabled",true);
  }
 else{
   $("#flap-drop").attr("disabled",false);
  } 
 });

这里有什么问题？

Here's同样的小提琴。

Answer 1

您可以使用prop()：

$('option').prop('disabled', 'disabled')

Answer 2

$("#1st-dd").change(function() {
    $("#flap-drop").attr("disabled", this.value=="23"); 
    // or $("#flap-drop").toggle(this.value!="23");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="1st-dd">
    <option value="23" disable_child="y" class="disableDropdown">No Pocket</option>
    <option value="24" disable_child="n" selected="selected" class="disableDropdown">1 Pocket</option>
    <option value="25" disable_child="n" class="disableDropdown">2 Pocket</option>
  </select>
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option>
  </select>
</div>

以这种方式试试。而不是单击我使用change并比较与您相同的值

Answer 3

$("#1st-dd").change(function() {
    $("#flap-drop").attr("disabled", this.value=="23"); 
    // or $("#flap-drop").toggle(this.value!="23");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="1st-dd">
    <option value="23" disable_child="y" class="disableDropdown">No Pocket</option>
    <option value="24" disable_child="n" selected="selected" class="disableDropdown">1 Pocket</option>
    <option value="25" disable_child="n" class="disableDropdown">2 Pocket</option>
  </select>
</div>

<div class="col-sm-2 uno_part_wrapper">
  <select class="form-control switcher" id="flap-drop">
    <option value="26">No Flap</option>
    <option value="27" selected="selected">Flap Pocket</option>
  </select>
</div>

使用jQuery禁用并启用下拉选项

3 个答案: