Jquery - 检测点击选项禁用 HTML 选择答案

【问题标题】：Jquery - Detect click options disabled HTML selectJquery - 检测点击选项禁用 HTML 选择
【发布时间】：2016-02-08 10:56:17
【问题描述】：

$(function(){

	$("select:option").on('click', this, function(event) {
		event.preventDefault();
		alert("a");
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
  <option value="">Select</option>
  <option value="1">Options 1</option>
  <option value="0" disabled="disabled">Options 2</option>
  <option value="0" disabled="disabled">Options 3</option>
  <option value="0" disabled="disabled">Options 4</option>
</select>

我需要检查 Jquery，如果用户单击选择器的选项被禁用，如果用户单击显示 alert()。

示例： 选择多个选项，此选择中值为 0 的选项被禁用，但如果用户单击禁用的这些选项中的任何一个，我们会显示 警报().

<select name="options" id="options">
  <option value="">Select</option>
  <option value="1">Options 1</option>
  <option value="0" disabled="disabled">Options 2</option>
  <option value="0" disabled="disabled">Options 3</option>
  <option value="0" disabled="disabled">Options 4</option>
</select>

非常感谢您的帮助！

【问题讨论】：

您想让他们实际选择禁用的选项，还是只检测他们尝试选择一个？
另外，您需要支持的最不现代的浏览器是什么？
我需要显示禁用的选项，用户可以选择它们，但是如果你尝试它，并选择禁用这些选项之一，在警报上显示一条消息，这样的选项是不允许的原因......并适用于所有当前的浏览器和手机。
<option> 标签不接受跨浏览器的事件，您也不能选择禁用的选项。为什么你会需要这个？你试图解决的更高层次的问题是什么？另请注意，您的 jQuery 选择器没有任何意义。没有:option 选择器，this 是document
案例例如：我需要让用户知道还有其他选项可用，但是对于其中一些选项可能无法启用以通过消息通知您，例如，选择其中一个这些你应该联系管理员。

标签： javascript jquery html select

【解决方案1】：



    $(function(){
        var options_sel_idx = 0;

        $("#options").on("change", this, function(event) {
            if($(this.options[this.selectedIndex]).hasClass("disabled")) {
                alert("a");
                this.selectedIndex = options_sel_idx;
            } else {
                options_sel_idx = this.selectedIndex;
            }
        });
    });
    <style type="text/css">
        .disabled {color:#808080;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select name="options" id="options">
      <option value="">Select</option>
      <option value="1">Options 1</option>
      <option value="0" class="disabled">Options 2</option>
      <option value="0" class="disabled">Options 3</option>
      <option value="0" class="disabled">Options 4</option>
    </select>

【讨论】：

非常感谢，正是我需要做的。