select 下拉框不可选

简介: select下拉框设置不可选

通常情况下,设置表单输入框不可操作的时候会选择使用disabled或者readonly,那么disabled和readonly有什么区别呢?

disabled和readonly

首先来说这两个属性都可以作用在表单元素上,使表单元素不可用;但是他们有有所不同。

image.png

如图可见:

readonly设置input输入框为只读,可以选中;

disabled设置input输入框不可输入,不可选中;

image.png

readonly设置input输入框,如果input上面绑定有事件,可以触发;

disabled设置input输入框,如果input绑定有事件,无法触发;

另外:

readonly设置input输入框,表单提交时,属性值可以被提交;

disabled设置input输入框,表单提交时属性值无法被提交;

select 下拉框不可选择

而如果设置select下拉框不可选择的话,如果设置属性为disabled的话,属性值无法提交,如果设置为readonly属性的话,下拉框仍然可以选择,这个时候可以采用另外一种方案,给select框设置属性

style="pointer-events: none;background-color:#eee;"

可以达到select下拉框不可选择同时不影响属性值提交的目标,如图效果

image.png


CSS pointer-events 属性

设置元素是否对鼠标事件做出反应:

属性值 描述
auto 默认值,设置该属性链接可以正常点击访问。
none 元素不能对鼠标事件做出反应

更多css pointer-events属性内容可以参考文档 :https://www.runoob.com/cssref/css3-pr-pointer-events.html

相关文章
|
6月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
742 0
el-select下拉多选框 el-select 设置默认值不可删除功能
vxe-table可编辑状态默认显示下拉选select为默认展示
vxe-table可编辑状态默认显示下拉选select为默认展示
select下拉框的值传递
select下拉框的值传递
64 0
|
JavaScript
jQuery设置下拉框select 默认选中option
$("#id option:first").prop("selected", 'selected');  将请选择加入到select中第一位 $("#id").
1590 0
|
数据库
【TP5】select下拉框的默认显示父级
【TP5】select下拉框的默认显示父级
290 0
【TP5】select下拉框的默认显示父级