javascript - 如何禁用<select>标记，但同时绑定(bind)jquery单击？

我只是注意到一个奇怪的行为：

我想动态禁用某个元素以防止用户打开选项菜单，但是同时我想绑定一个单击，因此用户单击该按钮时，会收到警告“抱歉，此选择器已禁用”

一个更好的例子是，例如，当您有两个选择元素，并且如果用户从＃select1中选择一个选项，则禁止选择任何形式的＃select2

我不想因为其他不需要完全解释的原因而隐藏＃select2。

<form>
   <select id="select1" disabled> // jquery on() won't work because of "disable"
        <option value='1' >apple</option>
        <option value='2' >banana</option>
    </select>
</form>


 $('form').on('click', '#select1', function(e){
        // do something
 });

最佳答案

您无法绑定到javascript中的禁用字段。您的选择是围绕select进行div接收Alex所提到的click事件，或者如果您确实不希望其他元素，则可以将select框保持启用状态，将其设置为禁用状态，然后立即点击模糊。这不是一个很干净的解决方案，但是我不知道您在添加元素方面的限制。

$("#select1").click(function(){
	$(this).blur();
});

.disabled{
  color: #bababa;
  background-color: #f0f0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="select1" class="disabled">
      <option value='1' >apple</option>
      <option value='2' >banana</option>
    </select>
</form>