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

穿透disabled元素的点击事件

最新推荐文章于 2023-12-14 14:50:48 发布

原创最新推荐文章于 2023-12-14 14:50:48 发布 · 7.4k 阅读

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

1008

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">

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

低至一折起的博客

01-26

6806

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

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

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

li_dian_jin的博客

12-16

6393

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

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

weixin_47020721的博客

03-07

7505

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

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

weixin_43955988的博客

04-29

4173

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

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

weixin_30538029的博客

03-23

1866

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

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`有...

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

dawuafang

03-19

231

//禁用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

1177

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

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

最新发布

2301_77470482的博客

12-14

1719

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

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

One_Piece111的博客

07-19

1855

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

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

weixin_47336389的博客

12-28

1516

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

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

weixin_39996141的博客

06-07

3865

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

form表单元素中disabled的元素的值不会提交到服务器

weixin_30875157的博客

11-27

416

1.表单元素中disabled的元素的值不会提交到服务器，后台获取的值为null <form id="myForm" action="#" method="post"> 　　<input name="username" disabled="disabled" /> 　　<input type="submit" value="提交"/> ...

表单提交按钮点击后变灰的JavaScript实现

在这个示例中，当用户点击提交按钮后，会触发一个事件监听器，该监听器首先阻止了表单的默认提交行为，然后模拟了表单提交的动作（这里仅仅是弹出了一个提示框），最后通过直接修改按钮的样式或添加属性来禁用按钮。...