ドロップダウン選択は "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

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

これは、以下の行を使用することです解決するためのもっとも簡単な方法：

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

ただし、以下はどこで私のために働きました私の場合私は私のセルが欲しかった無効なカーソルが残っている - 'ポインタイベント'を 'なし'に設定すると、カーソルは「許可されていません」と表示されなくなります。

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/