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

jquery disable item options if a certain value is selected

本文关键字：选项 jquery 选择 如果      更新时间：2024-04-10

我遇到了一个jquery问题。。如果选择的值是"有趣的值"，我实际上想禁用所有（来自除父项之外的所有其他项）

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

例如：如果我们从第一个菜单中选择"有趣的值"，我们就会得到

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

例如：如果我们从第二个菜单中选择"有趣的值2"，我们就会得到

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

谢谢：）

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

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

演示

我不确定我是否明白，但有这样的东西：

$('[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

您可以将onchange事件附加到两个选择项，并检查新的选择值是否等效于第一个菜单的有趣值和第二个菜单的兴趣值2。您可以使用.pr（）来禁用此功能。

你可以这样做：

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

这里是

<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>
相关文章：