解决select下拉框禁用（设置disabled属性）后台获取值为空问题

已于 2024-03-07 10:40:46 修改
阅读量1.1k 收藏 7
点赞数 9
文章标签： html5 css javascript
于 2024-03-07 10:32:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012709717/article/details/136526476
版权
本文介绍了如何在不修改select下拉框选项的情况下，通过CSS的pointer-events属性控制用户交互，以在提交表单时将选中的值传给后台。提供静态和动态切换pointer-events状态的方法.
摘要由CSDN通过智能技术生成

有些场景我们不让修改select下拉框选项，但是提交时，需要把下拉选项值传递到后台。大多数人可能第一时间想到的方法是通过设置disabled属性，但是发现值并不会传递到后台。以下设置方法可以达到我们的目的：

在select标签添加style="pointer-events:none"（去除鼠标事件）即可。如果需要动态修改则按如下方法设置：

$("#id").css('pointer-events', 'none'); // 去除鼠标事件

$("#id").css('pointer-events', 'auto'); // 恢复鼠标事件

小City故事
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select动态禁用
Miketutu的博客
03-21 1026
这5个el-select控件遵循这样的规则，都是使用同一个list集合，如果第一个el-select选择了list中的某一项，那么这一项就被禁用；其他的el-selet就不能选择这一项了；如果第二个el-select选择了list中的某一项，那么这一项和第一个el-select选择的项都禁用，在一个el-form表单中有5个el-form-item;每个el-form-item是一个el-select控件；其他的el-select就不能选择这两项了；
设置disabled属性后台读不到数据如何让select支持readonly
09-28
设置了disabled属性后，后台读取不到数据，让select支持readonly属性，可以设置disabled属性，并把表单值存入hidden隐藏域中，也可以使用jquery控制。示例如下，需要的朋友不要错过
动态禁用el-select中某个选项
m0_65299760的博客
02-28 1044
【代码】动态禁用el-select中某个选项。
select 下拉框不可选
最新发布
csdn565973850的博客
06-17 648
select下拉框设置不可选
动态设置select禁用
00年女程序员分享自己的学习笔记
08-16 4707
动态设置select禁用 有两个输入框，让第一个有值时，第二个选择框才可选择内容。 因为你关之前isDisabled=false，，此时disabled不为true（刷新页面过后才是初始页面，初始时disabled为true）再打开时未选择第一个输入框的值，就不会触发方法，disabled仍为false。这样写的话，当我第一个输入框选中值之后，第二个select变为不禁用，此时，我使用clearable清空第一个输入框，第一个输入框没有值，第二个应该变成禁用，但是并没有变成禁用。...
解决select 下拉框 设置disabled属性后 form表单提交到后台取不到值的情况
euijkfd的专栏
03-14 6761
1. 鉴于select 下拉框没有readonly属性，有以下两种方式：    1. <select  style='width: 235px;color:#aaa'       onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">    2.在...
select-disabled-传值
04-07
select下拉框不可编辑，但可以传值到后台
Select下拉框禁用的三种方式
热门推荐
qq_28332767的博客
07-25 4万+
1.为下拉框添加样式，可以禁用该下拉框： 特点：不会出现无法取值的问题 <select name="name"id="select" class="select" style="pointer-events: none;"></select> 2.为下拉框添加onfocus和onchange方法，可以禁用该下拉框： <selectname="name"i...
关于div、input、select标签的禁用
weixin_45102035的博客
07-06 3149
关于div、input、select标签的禁用
使用jQuery禁用、开启select标签方法
xinghuo0007的博客
05-12 2万+
知识点一：禁用思路 思路1： 直接在select标签上添加disabled="disabled"属性 思路2： 禁用select标签就是禁用select标签中所有的option选项---给select标签中的所有option加上disabled="disabled"属性知识点二：按照思路1，写案例测试，代码如下：<!DOCTYPE html> <html lang="en"> <hea
禁用启用input、select、按钮影藏和显示
weixin_44543121的博客
07-08 1571
禁用启用input、select、按钮影藏和显示
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
javascript中select下拉框的用法总结
10-23
- **多选下拉框**：如果需要支持多选，可以使用`<select multiple>`，但获取选中项的方式会有所不同，需要使用`selectedOptions`属性。 ### 5. 扩展学习 对于更复杂的下拉框效果，如级联选择、搜索过滤等，可以...
微信小程序 select 下拉框组件.zip
02-23
- `select`组件支持`disabled`属性，设置为`true`可禁用组件。 - `select`组件还支持`confirm-type`属性，可以设置为`default`（点击确认按钮后触发`bindchange`）、`search`（搜索模式，点击键盘的“搜索”按钮后...
vue 不使用select实现下拉框功能(推荐)
08-27
在 Vue Select 组件中，我们可以使用 disabled 属性来禁用下拉框，该属性的类型为 Boolean，默认值为 false。以下是 Vue Select 组件的使用示例： ```html <Select v-bind:disabled="isAble" clearable v-model=...
select默认不能选中时disabled属性不能给后台传值
lyx32609的博客
05-06 1059
disabled定义和用法 disabled 属性规定禁用按钮。 被禁用的按钮既不可用，也不可点击。 可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该按钮的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使文本区变为可用状态。 select设置disabled属性后传值到后台 当设置了select/input的disabled属性后，后台无法通过request.getParameter("name")得到其内容，若需要传值到后台
设置select菜单禁止选择或选择无效
Alone_in_的博客
12-04 7443
一、disabled属性 在select上设置disabled="disabled"，即可将下拉菜单变为只读状态，不可选择，点击也无效。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//...
jQuery 设置 select 无法选择（类似禁用），且可以提交
weixin_42256765的博客
03-20 3398
概要 在项目开发中，一般回填页面的 select 都是为不可再次选择的，但是直接使用 disabled 属性会使 select 框无法再次提交，所以使用 css 对 select 框设置禁用选择是最好的办法。 select 禁用下拉选择 $('#xxx').attr('style','pointer-events: none;'); select 设置灰色 $('#xxx').attr('style','background-color: #EEEEEE;'); 禁用且灰色 $('#xxx').a
禁用下拉框
万物皆代码
08-06 7355
列表页面中点击查看按钮时，不想让用户可以选择其他的选项。虽然可以直接去掉提交按钮，来实现让用户只能查看不能修改的功能，但是用户还是可以自由的查看下拉框里的内容。 我们要实现的是只能查看，就是将所有选择框禁用： $(function() { //查看弹出页面，禁止内容修改 $('#popup input').attr("disabled",true); $('#popup textare...
layui下拉框禁用置灰
09-27
在Layui中，如果要禁用下拉框并将其...通过设置disabled属性为disabled，可以禁用下拉框，并且使用form.render('select')方法来渲染下拉框。如果要启用下拉框，可以使用removeAttr("disabled")方法来移除disabled属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值