web-dev-qa-db-ja.com

ドロップダウン選択は、「読み取り専用」属性で引き続き選択可能です

読み取り専用の「選択」要素を選択不可にしたいのですが、これは読み取り専用の入力ボックスと同じ動作です。

以下のコードでは、値「abc」を持つ入力ボックスの値を変更できません。ただし、ドロップで選択を変更することはできます。これらの値をサーバーに送信する必要があるため、「disabled」属性を使用できません。

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

</input>

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

https://jsfiddle.net/6Lu1jpLx/

htmlformshtml-selectreadonly
9
user1187968

これを解決する簡単な方法は、次の行を使用することです。

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

8
Claire
$("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>
3
Dhaarani

disabled属性を使用して読み取り専用にする必要があります。

<select disabled>
  <option>Item ABC</option>
  <option>Item XYZ</option>
</select>
0
Niravdas