web-dev-qa-db-fra.com

La sélection déroulante est toujours sélectionnable avec l'attribut "lecture seule"

Je veux qu'un élément "select" en lecture seule ne soit pas sélectionnable, le même comportement que la zone de saisie en lecture seule.

Dans le code ci-dessous, vous ne pouvez pas modifier la valeur de la zone de saisie avec la valeur "abc". Cependant, vous pouvez toujours modifier la sélection dans la liste déroulante. Je ne peux pas utiliser l'attribut "désactivé" car j'ai encore besoin d'envoyer ces valeurs au serveur.

<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

La manière la plus simple de résoudre ce problème serait d'utiliser la ligne ci-dessous:

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

Cependant, ce qui suit a fonctionné pour moi où dans mon cas, je voulais que mon Select ait toujours le curseur désactivé.

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

vous devez utiliser l'attribut disabled pour le rendre en lecture seule.

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