Question

我只是注意到一个奇怪的行为：我想动态禁用某个元素以防止用户打开选项菜单，但是同时我想绑定一个单击，因此用户单击该按钮时，会收到警告“抱歉，此选择器已禁用” 一个更好的例子是，例如，当您有两个选择元素，并且如果用户从＃select1中选择一个选项，则禁止选择任何形式的＃select2 我不想因为其他不需要完全解释的原因而隐藏＃select2。 <表格> $（'form'）。on（'click'，'＃select1'，function（e）{ // 做点什么 }）;

Answer 1

您无法绑定到javascript中的禁用字段。您可以选择围绕{select区域创建一个div，以接收Alex所述的点击事件，或者，如果您确实不想要其他元素，则可以将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>

Answer 2

这是解决您问题的解决方法。

您可以将div覆盖在选择区域上，并在加载后检查disabled是否为{em> NOT disabled，我们使用{{1} }删除叠加层，否则，我们将其保留在那里以将.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;
}

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

2 个答案: