如何禁用<select>标签，但同时绑定jquery点击？

Question

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

我想动态禁用一个元素以防止用户打开选项菜单，但同时我想绑定一个点击，所以用户在点击它时，它会收到一个警报"对不起，这个选择器被禁用了">

一个更好的例子是，例如，当你有两个选择元素时，如果用户从 #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
});

Answer 1

您不能绑定到 JavaScript 中禁用的字段。您的选择是在选择周围创建一个div 以接收 Alex 提到的点击事件，或者如果您真的不想要其他元素，您可以启用选择框，将其样式设置为禁用，并在单击时立即模糊。这不是一个非常干净的解决方案，但我不知道您在添加元素方面的限制是什么。

$("#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>

Answer 2

这是您问题的解决方法。

您可以在选择上覆盖一个div，并在加载时检查它是否disabled是否未disabled，我们使用.remove()来删除覆盖，否则，我们将其保留在那里以将.on('click'...)事件挂在上面。

---

let disabled = $('#select1').is(':disabled')
if (!disabled) {
$('#test').remove();
}
$('#test').on('click', function(e) {
alert("sorry this selector is disabled");
});

#test {
position: absolute;
width: 68px;
height: 17px;
}

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