如何将 select 控件设置为只读

字数330 大约花费1分钟

目录

  1. 1. select 控件是否有 readonly 属性
  2. 2. 能否使用 disable 属性设置 select 控件为只读

select 控件是否有 readonly 属性

select 控件自身没有 readonly 属性,只有 disable 属性。

能否使用 disable 属性设置 select 控件为只读

select 设置为 disable 属性后,确实不可改,起到只读的作用,但设置为 disable 后,name 属性也失效了,传递到后台时,对应的属性值变为 null 了。
有一种解决办法是在提交到后台之前将 disable 属性去掉,但在页面上不应过多依赖 js 处理数据,因为如果出错了,会影响到数据安全。建议的解决办法是将 select 设置为 disable 属性后,在后面增加一个 hidden 类型的 input 控件,name 和值都与 select 相同。
github 上有一个 readonly 插件 完成了上述动作,该插件支持 select 和 input 控件,在项目中引入 readonly.js 文件后,可以直接使用。

1
2
3
4
<select id="testSelectReadOnly" >
<option value="1">1</option>
<option value="2">2</option>
</select>

有引入 jquery 时,语法如下:

1
2
3
readonly('#testSelectReadOnly', true); //set readonly
readonly('#testSelectReadOnly', false); //set editable
readonly('select', true);

您可以在 这里 观察和调试这段代码。

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/ru-he-jiang-select-kong-jian-she-zhi-wei-zhi-du/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章