如何禁用SweetAlert下拉选择框中的指定选项？

SweetAlert原生配置没有提供直接禁用下拉选项的参数，我们可以在弹窗渲染完成后，通过DOM操作给目标选项添加disabled属性来实现需求。以下是具体实现方法：

方法：利用弹窗回调操作DOM #

根据你使用的SweetAlert版本（旧版或SweetAlert2），选择对应的类名定位下拉框元素，然后找到目标选项并设置禁用状态。示例中我们禁用bananas选项：

swal({
  title: 'Select field validation',
  input: 'select',
  inputOptions: {
      apples: 'Apples',
      bananas: 'Bananas',
      grapes: 'Grapes',
      oranges: 'Oranges'
  },
  inputPlaceholder: 'Select a fruit',
  showCancelButton: true,
  onOpen: () => {
    // 兼容旧版和新版SweetAlert的选择器
    const selectElement = document.querySelector('.swal2-input') || document.querySelector('.swal-input');
    // 定位value为bananas的选项
    const disabledOption = selectElement.querySelector('option[value="bananas"]');
    if (disabledOption) {
      disabledOption.disabled = true;
      // 可选：设置默认选中其他选项，避免禁用选项被选中
      selectElement.value = 'apples';
    }
  }
})

关键说明 #

• 类名区别：旧版SweetAlert的下拉框类名是.swal-input，SweetAlert2是.swal2-input，所以用||兼容两种情况。
• 定位选项：通过option[value="你的选项值"]精准找到要禁用的选项，设置disabled = true即可禁用该选项。
• 可选优化：如果禁用的选项原本是默认选中状态，建议手动设置一个可用选项为默认值，提升用户体验。

内容的提问来源于stack exchange，提问作者Jai Kumaresh