Question

我有一个下拉菜单，其中除第一个没有值（只是一个标签）之外，所有选项都被禁用。我如何检查$ {document）.ready（function（）是否禁用了此下拉选项的所有选项（第一个选项没有值除外），如果显示，则显示警报，例如alert（'All Options Disabled'） ;。

<!DOCTYPE html>

<html>

<body>

<select id="selectId">

<option value="">Select a Car</option>

<option value="volvo"disabled>Volvo</option>

<option value="saab"disabled>Saab</option>

<option value="opel"disabled>Opel</option>

<option value="audi" disabled>Audi</option>

</select>

</body>

</html>

Answer 1

遍历option，并检查每个选项是否被禁用，或者其value属性是否为空字符串：

const allDisabled = Array.prototype.every.call(
  document.querySelector('#selectId > option')
  option => option.disabled || option.value === ''
);
console.log(allDisabled);

<select id="selectId">
  <option value="">Select a Car</option>
  <option value="volvo"disabled>Volvo</option>
  <option value="saab"disabled>Saab</option>
  <option value="opel"disabled>Opel</option>
  <option value="audi" disabled>Audi</option>
</select>

或者，使用jQuery和each：

let allDisabled = true;
$('#selectId > option').each(function() {
  const $this = $(this);
  if (!$this.prop('disabled') && $this.prop('value')) allDisabled = false;
});
console.log(allDisabled);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectId">
  <option value="">Select a Car</option>
  <option value="volvo"disabled>Volvo</option>
  <option value="saab"disabled>Saab</option>
  <option value="opel"disabled>Opel</option>
  <option value="audi" disabled>Audi</option>
</select>

JavaScript检查下拉选项是否全部禁用

1 个答案: