Question

我有三个相同的下拉菜单，有三个选项。

每个菜单只能在一个菜单中选择一次，然后在所有其他所选菜单中禁用所选选项。

一旦再次选择空选项（""）（选择已清除），我在启用选项时出现问题。但是，在更改事件中放置$(this).attr('disabled','');似乎确实有效。

如何做到这一点？

$('.e1').change(function() {
  var value = $(this).find('option:selected').text();
  if (value != '') {
    $('#myselects').find('option:not(:selected)').each(function() {
      if ($(this).text() == value) {

        $(this).attr('disabled', 'disabled');

      }
    });
  }

})

<div id="myselects">
  <select class="e1" style="width:300px">
    <option></option>
    <option>Alabama</option>
    <option>Amalapuram</option>
    <option>Anakapalli</option>
  </select>
</div>

Answer 1

尝试使用$(this).prop('disabled',true);每

从jQuery 1.6开始，.attr（）方法为尚未设置的属性返回undefined。 要检索和更改DOM属性，例如表单元素的已选中，已选中或已禁用状态，请使用.prop（）方法。 http://api.jquery.com/attr/

Answer 2

尝试$(this).removeAttr('disabled');

Answer 3

问题在于条件和选择者。这应该是你要求的（按下运行）：

$('.e1').change(function() {
  var selectedVal = $(this).val();
  $('p').text("Last selected: " + selectedVal)
  if (selectedVal !== '')
    $('#myselects').find('select>option:not(:first-of-type)').each(function() {
      if ($(this).val() === selectedVal)
        $(this).prop('disabled', true);
    });
  else 
    $('#myselects').find('select>option').each(function() {
      $(this).prop('disabled', false);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myselects">
  <select class="e1" style="width:300px">
    <option></option>
    <option>Alabama</option>
    <option>Amalapuram</option>
    <option>Anakapalli</option>
  </select>
  <select class="e1" style="width:300px">
    <option></option>
    <option>Alabama</option>
    <option>Amalapuram</option>
    <option>Anakapalli</option>
    <option>anana</option>
  </select>
</div>
<p></p>

我还使用了prop方法，因为«.attr()方法会为尚未设置的属性返回undefined，因为Jhony mentioned ...

jquery multiple选择禁用/启用选项

3 个答案: