form表单元素设置disabled属性后支持点击click事件

最新推荐文章于 2024-04-08 11:10:26 发布

原创最新推荐文章于 2024-04-08 11:10:26 发布 · 7.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #表单元素 #input #disabled

笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种处理HTML中disabled元素的点击事件的方法。通过将事件绑定到外层元素并设置disabled元素的pointer-events为none，使得点击事件能够穿透disabled元素触发外层元素的事件。

<label onclick="alert('holle world')"><input type="checkbox" disabled style="pointer-events:none"></label>

在disabled元素外面包一层，可以是label，也可以是其它的元素，然后把事件写在外层元素上，并把disabled元素样式设置成”pointer-events:none”，这个样式是让元素忽略鼠标事件，让点击直接穿透到下一层元素去，然而就触发到label上的点击事件了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lnkToKing

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端框架Layui学习三：表单元素、表单对象

zhengzaifeidelushang的博客

07-15

1027

Layui layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。表单元素单行输入框 required：注册浏览器所规定的必填字段 lay-verify：注册form模块需要验证的类型 class=“layui-input”：layui.css提供的通用CSS类 <form class="layui-form" action=""> <div class="layui-form-item">

ElementUI 禁用 disabled 整个表单，但是有一个 item 是不禁用的

li_dian_jin的博客

12-16

6496

给 `el-form` 设置了 `disabled`，要给其中的一个 `el-form-item` 取消禁用，嵌入一个子 `form` 就行了。

参与评论您还未登录，请先登录后发表或查看评论

在input加了disabled属性后，如何触发点击事件?

weixin_47020721的博客

03-07

7708

点击子标签，会一层一层往上传，并触发父标签的绑定事件。

el-form使用了disabled但是想操作某个点击

m0_66300374的博客

04-08

1873

作为前端一般操作都是新增，编辑，查看数据，新增和编辑是差不多的操作，只是编辑需要回显数据，查看的时候大部分的数据不可点击，所以就出现了有部分数据查看不完全的情况。主要是加了个<el-form></el-form>这样就不会被外面那层的全局禁用点击影响到，如果你想点击输入框跳转。中间的数据不能全部查看到，但是需求是点击右边按钮允许查看的。直接包裹输入框，然后写点击跳转的方法。

在vue使disabled为true，click事件还能执行。

weixin_43955988的博客

04-29

4195

如果我用button标签disabled就能起到作用，但是如果用div，这个disable就无效了

Jquery表单-层级-内容-属性-子元素选择器知识点整理

11-28

- **`.click(function())`**：为点击事件绑定事件处理器。 - **`.submit(function())`**：为提交表单事件绑定事件处理器。 - **`.change(function())`**：为表单元素值改变事件绑定事件处理器。 - **`.focus...

jquery中通过过滤器获取表单元素的实现代码

10-28

1. `$("input:text:disabled").val("不能输入")`：这行代码选中所有`type="text"`且被`disabled`属性的`<input>`元素，并为它们设置值为“不能输入”。 2. `$("input:text:enabled").val("能输入")`：这行代码选中...

Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

11-27

在示例代码中，我们看到`<button>`元素的`ng-disabled`属性被设置为`!shyj`。这里的`!`是逻辑非运算符，表示如果`shyj`的值为空或 falsy（比如 null、undefined、空字符串等），按钮就会被禁用；反之，如果`shyj`有...

AngularJS使用指令增强标准表单元素功能

11-23

5. **表单指令属性**：除了`ng-model`，还有其他一些表单相关的指令，如`ng-change`会在模型值改变时触发回调，`ng-required`指定字段是否必须填写，`ng-disabled`控制元素的禁用状态等。这些指令帮助我们实现更复杂...

用disabled属性修饰a标签，a标签仍然能点击

weixin_30538029的博客

03-23

1893

不知道各位同学有没有遇到跟我相同的问题，就是用jQuery操作a标签disabled的，来控制重复提交表单做过开发的都知道，表单验证重复提交，包含前端和后端，两方面的控制。前端控制使我们常用的手段。用disabled控制表单重复提交 1 $('.doYes').attr('disabled',true); 2 ajaxSubmit('', dat...

jquery禁用form表单中所有的表单项

dawuafang

03-19

239

//禁用form表单中所有的input[文本框、复选框、单选框],select[下拉选],多行文本框[textarea] function disableForm(formId,isDisabled) { var attr="disable"; if(!isDisabled){ attr="enable"; } $("form[id='"+formId+"'] :...

elementPlus el-form中组件非表单组件disable状态

weixin_45890414的博客

08-15

1266

【代码】elementPlus el-form中组件非表单组件disable状态。

form 表单中 disabled 属性的元素不参与表单提交

低至一折起的博客

01-26

6844

示例代码： form id="saveForm"> input id="saveForm-age" name="age" disabled="disabled" /> input id="saveForm-age" name="age" disabled="true" /> form> 当上述两种写法出现时，表单提交的数据中，将不包括 age 这个属性，这是因为 inpu

批量设置el-form-item禁用/可用效果

2301_77470482的博客

12-14

1821

可用的：:disabled="operList.indexOf('departType') == -1"禁用的：:disabled="operList.indexOf('departCode') == -1"第二步：在el-form-item设置disabled属性。第一步：定义一个数组（将可用的字段放进数组里）

若依vue整个form表单被disabled修饰后,让里面的一个按钮还有其功能

One_Piece111的博客

07-19

1910

因为新增,修改,查看走的都是同一个方法，所以设置了动态的disabled的value值但是出现个问题就是我在里面表单的一个查看按钮无法点击了。在网上找了许久，所以直接上解决方法附：

如何禁用表单中所有的文本框input 以及下拉框select 效果是只读模式

weixin_47336389的博客

12-28

1553

第一步： (1) 在form表单外面加一个标签< fieldset> <fieldset style="border: none;"> <form>内容...</form> </fieldset> 那什么是fieldest 呢我不知道我简单查了一下，大概就是 < fieldset > 标签将表单内容的一部分打包，生成一组相关表单的字段。第二步： (2) 当我需要禁用的时候，就给 < fieldset >

html表单按钮灰色,点击提交按钮后按钮变灰色不可用状态的三种方法

weixin_39996141的博客

06-07

3950

第一种方法：直接按钮中加入当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能。从代码就可以看出，我们只需在提交按钮上加入这一句： onclick="javascript:{this.disabled=true;document.form1.submit();}"，意思是当按钮点击后，将按钮的不可用属性设置为true，这样按钮就变灰了表单提交后按钮变成灰色[Ctr...

前端select组件使用disabled属性后无法将值返回后端

最新发布

09-27

<think>在用户的问题中，用户提到了select组件使用disabled属性后，值无法返回后端的问题，并提供了多个引用。根据引用[1]，确实存在设置disabled属性后后台无法接收值的情况。引用[2]和[3]则提到了使用Vue和Element UI的解决方法。解决方案思路： 1. 引用[1]指出，disabled会导致表单提交时该字段的值不被包含在提交数据中。因此，需要避免直接使用disabled，或者采用其他方式在提交前恢复该字段的可编辑状态。 2. 引用[2]提供了一种动态绑定disabled的方法（使用:disabled），这样可以在需要的时候（比如提交前）将disabled设置为false，然后再提交，这样就可以将值传递到后端。 3. 另一种方法是，不使用disabled，而使用readonly。但是引用[1]提到select不支持readonly，所以可以考虑将select设置为只读样式（比如背景变灰），同时阻止用户交互事件（如点击、键盘事件），这样看起来像禁用，但表单提交时值依然会传递。 4. 还有一种方法是，将该字段的值存储在一个隐藏域（hidden input）中，当select被禁用时，通过隐藏域传递值。具体步骤（以Vue和Element UI为例）：方法一：动态控制disabled状态（推荐） - 在data中定义一个变量（如isDisabled）来控制disabled状态。 - 在el-select上绑定:disabled="isDisabled"，初始设置为true（禁用）。 - 在提交表单之前，将isDisabled设置为false（这样select会变成可用，它的值就会包含在表单数据中），然后提交表单。提交完成后，如果需要可以再设为true。 - 注意：由于设置false后DOM更新是异步的，所以提交操作可能需要放在nextTick中，或者使用async/await确保DOM更新后再提交。方法二：使用隐藏域 - 在表单中添加一个隐藏的input，其name属性与select的name相同（如果是表单提交）或者通过v-model绑定同一个数据（如果是Vue）。 - 当select被禁用时，隐藏域的值会被提交。方法三：使用readonly样式和事件阻止 - 给select添加一个只读的样式（如设置背景色为灰色），并阻止用户的交互事件（如click, keydown等），这样用户无法改变值，但表单提交时值还在。根据引用[2]和引用[3]的提示，我们更倾向于使用方法一，因为它是动态的，而且利用了框架的特性。代码示例（方法一）：在Vue组件中： ```html <template> <el-form ref="form" :model="form" @submit.native.prevent="onSubmit"> <el-form-item label="活动区域"> <el-select v-model="form.region" :disabled="isDisabled" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { region: '' }, isDisabled: true // 初始禁用 } }, methods: { onSubmit() { // 提交前解除禁用 this.isDisabled = false; // 确保DOM更新后再提交表单 this.$nextTick(() => { // 这里假设使用axios提交，如果是表单直接提交，则不需要异步 // 如果是表单直接提交（如传统form），则不需要axios，直接this.$refs.form.submit() // 但一般Vue中我们使用axios异步提交 // 模拟表单提交 console.log(this.form.region); // 此时可以取到值 // 提交后可以重新禁用 // 如果提交后需要保持禁用状态，则设置this.isDisabled = true; }); } } } </script> ``` 注意：如果使用传统表单提交（非ajax），那么需要将表单提交动作放在nextTick中，因为禁用状态的改变会触发DOM更新，更新后才能包含该字段。方法二（隐藏域）的示例： ```html <el-form ref="form" :model="form" @submit.native.prevent="onSubmit"> <el-form-item label="活动区域"> <el-select v-model="form.region" :disabled="true" placeholder="请选择活动区域">  </el-select>  <input type="hidden" v-model="form.region" name="region"> </el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> </el-form> ``` 但是，在Vue中，使用v-model绑定隐藏域可能不是必须的，因为表单数据对象form中已经有region的值了。如果是传统表单提交，则需要隐藏域具有name属性，这样在提交时才会包含该字段。总结：推荐使用方法一，动态改变disabled状态，在提交前设为false，提交后再设为true（如果需要保持禁用状态）。相关问题： 1. 如果使用隐藏域，怎样确保隐藏域的值与select的值同步？ 2. 在动态改变disabled状态时，如何避免用户看到select从禁用状态变为启用状态的闪烁？ 3. 除了select，还有其他表单元素在设置disabled后也会导致值无法提交吗？ </think>### 前端 select 组件使用 disabled 属性后值无法返回后端的解决方案根据引用内容分析，当 select 组件设置 `disabled` 属性时，浏览器不会将该字段值包含在表单提交数据中。以下是 **三种实用解决方案**： --- #### ✅ 方案一：动态解除禁用状态（推荐） **原理**：提交表单前临时移除 `disabled` 状态 **适用场景**：Vue/React 等现代框架（参考引用[2]） ```html <el-select v-model="selectedValue" :disabled="isDisabled"  > <el-option value="1">选项1</el-option> </el-select> <script> export default { data() { return { isDisabled: true, // 初始禁用状态 selectedValue: "" } }, methods: { submitForm() { // 提交前解除禁用 this.isDisabled = false; // 等待DOM更新后提交（确保值被包含） this.$nextTick(() => { this.$refs.form.submit(); // 手动提交表单 this.isDisabled = true; // 恢复禁用状态（可选） }); } } } </script> ``` --- #### ✅ 方案二：使用隐藏域存储值 **原理**：同步 select 值到隐藏的 input 字段（引用[1]思路延伸） ```html <select v-model="selectedValue" disabled> <option value="1">选项1</option> </select>  <input type="hidden" name="selectedValue" :value="selectedValue" > ``` --- #### ✅ 方案三：改用只读模式替代禁用 **原理**：通过 CSS 和事件拦截模拟只读效果（引用[1]变通方案） ```html <select style="background:#eee; cursor:not-allowed;" @mousedown.prevent  @keydown.prevent  > <option value="1">选项1</option> </select> ``` --- ### ✨ 最佳实践建议 1. **框架项目首选方案一** 动态绑定 `:disabled` 状态，在提交前更新状态（引用[2]方案） 2. **传统项目首选方案二** 添加隐藏域同步值，兼容性好（引用[1]场景） 3. **特殊场景用方案三** 当必须保持视觉禁用效果且无法修改后端时使用 > ⚠️ 注意：若使用 `disabled` + `readonly` 组合，需注意 `select` 元素不支持原生 `readonly` 属性（引用[1]） --- ### 相关问题 1. 如何动态控制多个表单元素的禁用/启用状态？ 2. Vue/React 中如何优雅地实现表单提交前的状态转换？ 3. 除了 `select`，还有哪些表单元素在禁用时会导致值传递问题？ [^1]: 关于 select 框下设置 disabled 导致后台接收不到值的记录 [^2]: 通过动态绑定禁用状态实现值提交的方案 [^3]: 表单元素双向绑定的实现示例