下拉選擇仍然可以選擇「只讀」屬性

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/