Question

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

我在我的选择框中使用了选择的jquery插件。

我的问题是在禁用后可以点击选择框。我想在禁用后删除可点击的东西。

jQuery代码：

$(".chosen-select").chosen();

$(".disable-chosen").on('click', function (event) {
    event.preventDefault();
    $(".chosen-select").attr("disabled", "disabled").trigger("chosen:updated");
    $(".disable-chosen").off('click');
});

Answer 1

如果您指的是即使在禁用之后出现的轮廓，您也可以通过添加以下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>

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

1 个答案: