Html 下拉选择仍然可以通过“只读”属性进行选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39517722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop down selection is still selectable with "readonly" attribute
提问by user1187968
I want a read-only "select" element to be not selectable, the same behavior as the readonly input box.
我希望只读“选择”元素不可选择，与只读输入框的行为相同。
In the code below, you cannot change the value for the input box with the value "abc". However, you can still change the selection in the drop. I can't use "disabled" attribute because I still need to send these values to the server.
在下面的代码中，您不能更改值为“abc”的输入框的值。但是，您仍然可以更改下拉菜单中的选择。我不能使用“禁用”属性，因为我仍然需要将这些值发送到服务器。
<input type="text" readonly="readonly" value="abc">
</input>
<select readonly="readonly">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
回答by Claire
Simplist way to resolve this would be to use the below line:
解决此问题的简单方法是使用以下行：
$("#MySelect").css("pointer-events","none");
However, the following worked for me where in my case I wanted my Select to still have the disabled cursor - setting 'pointer-events' to 'none' will no longer show cursor as 'not-allowed'.
但是，以下对我有用，在我的情况下，我希望我的 Select 仍然具有禁用的光标 - 将“指针事件”设置为“无”将不再将光标显示为“不允许”。
JQUERY
查询
var isReadOnly = $("#MyCheckbox").prop("checked");
var domElements = $("#MyInput, #MySelect");
$(domElements).prop("readonly", isReadOnly);
$(domElements).toggleClass("my-read-only-class", isReadOnly);
$(domElements).find("option").prop("hidden", isReadOnly);
CSS
CSS
.my-read-only-class
{
cursor: not-allowed;
}
JSFiddle https://jsfiddle.net/xdddzupm/
JSFiddle https://jsfiddle.net/xdddzupm/
回答by Dhaarani
$("select :selected").each(function(){
$(this).parent().data("default", this);
});
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select disabled>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>
Try below code
<select>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>回答by Josh Mc
This can easily be achieved at a global level using css only:
这可以仅使用 css 在全局级别轻松实现：
select[readonly]{
pointer-events: none;
color: #828282; // If you also want the disabled input color.
}
回答by Niravdas
you should use disabledattribute to make it readonly.
您应该使用disabled属性使其成为只读。
<select disabled>
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
