html - 下拉选择仍然可以使用 "readonly"属性进行选择

Question

我想要一个只读的“select”元素是不可选择的，与只读输入框的行为相同。

在下面的代码中，您不能更改值为“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/

Answer 1

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

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

但是，以下对我有用，在我的情况下，我希望我的 Select 仍然具有禁用的光标 - 将“pointer-events”设置为“none”将不再将光标显示为“not-allowed”。

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/