Question

我遇到了一个jquery问题..如果选中的值是“interestingValue”，我实际上想要禁用所有其他项（除了父项以外的所有其他项）

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

例如：如果我们从第一个菜单中选择“interestingValue”，我们就会得到

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2" disabled="disabled">bar foo2</option>
      <option value="foo2" disabled="disabled">foo abc2</option>
      <option value="bar2" disabled="disabled">foo abc2</option>
    </select>

例如：如果我们从第二个菜单中选择“interestingValue2”，我们就会得到

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue" disabled="disabled">bar foo</option>
      <option value="foo1" disabled="disabled">foo abc1</option>
      <option value="bar1" disabled="disabled">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

谢谢：）

Answer 1

如果您的选择标签是兄弟姐妹，您可以尝试：

$('select').change(function(){
  if (this.selectedIndex == 0) {
     $(this).siblings('select').find('option').prop('disabled', true)
  }
})

DEMO

Answer 2

我不确定我能得到它，但是这样的话：

$('[id^=menufoo]').on('change', function() {
    if (this.value.indexOf('interestingValue') != -1 ) {
        $('[id^=menufoo]').not(this).find('option').prop('disabled', true);
    }else{
        $('[id^=menufoo]').find('option').prop('disabled', false);
    }
});

FIDDLE

Answer 3

您可以将onchange事件附加到两个选择项目，并检查新选择值是否等于第一个菜单的interestingValue和第二个菜单中的interestingValue2。您可以使用.prop（）来禁用它。

您可以这样做：

$("#menufoo").bind("change", function(event){

  $("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));

});

$("#menufoo2").bind("change", function(event){
  $("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});

Answer 4

你去吧

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#menufoo").change(function (){
    if($("#menufoo option:selected").val()=="interestingValue")
        $('.menufooClass2 option').attr('disabled','disabled');
  });
    $("#menufoo2").change(function (){
    if($("#menufoo2 option:selected").val()=="interestingValue2")
        $('.menufooClass option').attr('disabled','disabled');
  });


});
</script>   


   <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

        <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

如果选择了某个值，则jquery禁用项目选项

4 个答案: