如何在选择插件禁用后使选择框不可点击

时间:2014-07-29 13:07:35

标签: javascript jquery html css html5

我有这个选择框,在禁用后仍然可以点击。

我在我的选择框中使用了选择的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');
});

1 个答案:

答案 0 :(得分:4)

如果您指的是即使在禁用之后出现的轮廓,您也可以通过添加以下CSS来避免在禁用选择后出现轮廓。

.chosen-disabled .chosen-single:focus{
    outline: none;
}

Demo

说明:原因是因为您的选择被隐藏为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>