我有这个选择框,在禁用后仍然可以点击。
我在我的选择框中使用了选择的jquery插件。
我的问题是在禁用后可以点击选择框。我想在禁用后删除可点击的东西。
测试链接:http://jsfiddle.net/orlando/PrHDH/
jQuery代码:
$(".chosen-select").chosen();
$(".disable-chosen").on('click', function (event) {
event.preventDefault();
$(".chosen-select").attr("disabled", "disabled").trigger("chosen:updated");
$(".disable-chosen").off('click');
});
答案 0 :(得分:4)
如果您指的是即使在禁用之后出现的轮廓,您也可以通过添加以下CSS来避免在禁用选择后出现轮廓。
.chosen-disabled .chosen-single:focus{
outline: none;
}
说明:原因是因为您的选择被隐藏为div
(通过插件)并且大纲属于a
(锚点)元素在其中chosen-single
。实际上我们正在做的是指示当outline
类应用于该容器none
(由插件生成)时,浏览器将chosen-disabled
设为div
。
为了更好地理解:(这是插件输出的有效效果)
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 350px;" title="">
<a class="chosen-single" tabindex="-1"> <!-- This is the one -->
<span>Sloth Bear</span><div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" style="" data-option-array-index="1">American Black Bear</li>
<li class="active-result" style="" data-option-array-index="2">Asiatic Black Bear</li>
<li class="active-result" style="" data-option-array-index="3">Brown Bear</li>
<li class="active-result" style="" data-option-array-index="4">Giant Panda</li>
<li class="active-result result-selected highlighted" style="" data-option-array-index="5">Sloth Bear</li>
<li class="disabled-result" style="" data-option-array-index="6">Sun Bear</li>
<li class="active-result" style="" data-option-array-index="7">Polar Bear</li>
<li class="disabled-result" style="" data-option-array-index="8">Spectacled Bear</li>
</ul>
</div>
</div>