使用tabindex解决方案。适用于选择和文本输入。

简单地使用.disabled类。

CSS:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

JS:

$(".disabled").attr("tabindex", "-1");

HTML:

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

编辑:使用Internet Explorer，你还需要这个JS:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

这可能在某种程度上与其他解决方案类似，但简化为更少的行数。

假设有一个jquery函数禁用目标选项…

$("select[id='country']").val('PH').attr("disabled", true);
$("select[id='country']").parent().append("<input type='hidden' id='country' value='PH'>");

如果你想重新启用这个选项…

$("select[id='country']").attr("disabled", false);
$("input[id='country']").remove();

除了禁用不应该是可选的选项，我想实际上让他们从列表中消失，但仍然能够启用他们，我应该以后需要:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

它会找到所有带有只读属性的select元素，然后找到那些未被选中的select元素中的所有选项，然后隐藏它们并禁用它们。

出于性能考虑，将jquery查询分为2是很重要的，因为jquery从右向左读取它们，代码如下:

$("select[readonly] option:not(:selected)")

将首先找到文档中所有未选中的选项，然后筛选那些在具有只读属性的选择内的选项。

简单: 添加样式属性到你的选择标签:

style="pointer-events: none;"

这个javascript找到所有的'select'与'readonly'属性，然后把disabled在'options'除了selected(回发)

文档。querySelectorAll("select[readonly] > option:not([selected])")。forEach((el) => el。setAttribute("disabled"， "disabled")); 不带readonly: <select> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择> < br > 带readonly: <select readonly="readonly"> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择>

如果您有一个应该是只读的选择标记，那么从逻辑上讲，您必须将选择框转换为单个“文本”字段。

我说逻辑是因为它就像: "我必须向用户显示一个值"

无论该值是否来自选择标记，都仍然是单个值且不能更改(只读)。

因此，从逻辑上讲，只有在第一次插入值时才使用选择标记。

然后，当你需要显示这个值时，你必须把它放在“文本字段只读”上。

如果多选项为只读，则变成一个值列表(所选值)

我使用“text”是因为一个只读标记不需要“type”属性。 干杯