jQuery <select> 第一个 <option> 未禁用

Question

我正在尝试进行选择，以便当用户从下拉列表中选择产品时，它会被禁用，因为每个产品所采取的操作不会超过一次。这可行，但如果您单击下拉列表，它仍然被选中但被禁用，我想自动选择第一个可用的 <option>没有禁用它以便能够选择它，故事结束；) 有什么线索吗？

$('#product_name').find('option:not([disabled]):first-of-type');
$('#product_name').find('option:not([disabled]):first-child');
$('#product_name').find('option:nth-child(1):not([disabled])');

当然我玩过:not(:disabled)也是，但是从我在这个主题上的测试时间来看，CSS选择器对于未禁用的元素工作得很好，但是当第二个 parameter === requisite 时发挥作用，这将是“选择第一个匹配规则的”一切都会变黑并且不起作用。

Answer 1

使用:first选择器:

The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). While this matches only a single element, :first-child can match more than one: One for each parent.

$('select option:not([disabled]):first').addClass('highlight');

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select>
  <option disabled>Disabled One</option>
  <option disabled>Disabled One</option>
  <option>Enabled One</option>
  <option>Enabled One</option>
  <option selected>Enabled One</option>
  <option disabled>Disabled One</option>
  <option disabled>Disabled One</option>
  <option>Enabled One</option>
</select>