使用“readonly”属性仍可选择下拉选择

时间:2016-09-15 18:12:48

标签: html forms html-select readonly

我希望只读“select”元素不可选,与readonly输入框的行为相同。

在下面的代码中,您无法使用值“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/

4 个答案:

答案 0 :(得分:6)

解决此问题的简单方法是使用以下行:

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

但是,以下情况对我有用,在我的情况下,我希望我的Select仍然有禁用的光标 - 将'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/

答案 1 :(得分:3)

&#13;
&#13;
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您应该使用disabled属性将其设置为只读。

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

答案 3 :(得分:0)

<块引用>

style="pointer-events: none;"

对我有用

<select style="pointer-events: none;">
  <option>Item ABC</option>
  <option>Item XYZ</option>
</select>