下拉选择仍然可以使用“只读”属性进行选择答案

【问题标题】：Drop down selection is still selectable with "readonly" attribute下拉选择仍然可以使用“只读”属性进行选择
【发布时间】：2017-01-23 20:53:10
【问题描述】：

我希望只读的“选择”元素不可选择，与只读输入框的行为相同。

在下面的代码中，您无法更改值为“abc”的输入框的值。但是，您仍然可以更改下拉菜单中的选择。我不能使用“禁用”属性，因为我仍然需要将这些值发送到服务器。

<input type="text" readonly="readonly" value="abc">

</input>

<select readonly="readonly">
  <option>Item ABC</option>
  <option>Item XYZ</option>
</select>

https://jsfiddle.net/6Lu1jpLx/

【问题讨论】：

Disable select form field but still send the value的可能重复

标签： html forms html-select readonly

【解决方案1】：

$("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>

【讨论】：

提交时不包含禁用字段，这可能是个问题。

【解决方案2】：

解决此问题的最简单方法是使用以下行：

$("#MySelect").css("pointer-events","none");

但是，以下内容对我有用，在我的情况下，我希望我的 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

.my-read-only-class 
{   
   cursor: not-allowed;
}

JSFiddle https://jsfiddle.net/xdddzupm/

【讨论】：

非常感谢您提供此解决方案。我希望这个解决方案在互联网上得到进一步推广。
这几乎可以工作，但是通过使用pointer-events: none，选择元素不能再通过单击它来获得焦点。出于可访问性的原因，这很重要。（我们不应该假设每个人都可以同时使用鼠标和键盘）

【解决方案3】：

style="pointer-events: none;"

为我工作

<select style="pointer-events: none;">
  <option>Item ABC</option>
  <option>Item XYZ</option>
</select>

【讨论】：