下拉选择仍然可以选择“只读”属性

Question

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

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

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

Answer 2

来解决，这将是使用下面的线

Simplist方式：

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

但是，以下为我工作的地方在我的情况我想要我的选择ect仍然具有禁用的光标 - 将'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/