如何将select控件设置为只读

960 阅读1分钟

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文件后,可以直接使用。

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

有引入jquery时,语法如下:

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

欢迎搜索“谈谈IT”或扫描下方二维码关注微信公众号,第一时间获取最新文章(^_^)

谈谈IT