关于jq中设置html属性为disabled时flask后台获取数据出错的问题

最新推荐文章于 2021-06-01 02:43:19 发布
原创 最新推荐文章于 2021-06-01 02:43:19 发布 · 338 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Python #flask

解决了一个在项目开发过程中遇到的小Bug，在用户选择有效期时，若勾选“永久”选项，原本保存的时间格式2999-12-31会导致后台报错。通过将jQuery中的disabled属性改为readonly解决了该问题。

在进行项目开发时，本人遇到了一个小bug。

在选择有效期时，如果未勾选永久，则保存用户选择的日期；如勾选永久，则保存永久，日期格式显示为2999-12-31.页面效果如图：


之前jq中的代码如图所示：


然后在后台中获取时间框中2999-12-31这个值时报错：


解决办法：将jq当中的disabled的改为readonly即可


设置disabled属性后台读不到数据如何让select支持readonly
09-28
然而，一个常见的问题是，当`disabled`属性被设置在`<select>`元素上时，后台程序在提交表单时可能无法获取到选中的选项值。这是因为`disabled`状态的表单元素不会作为POST数据发送到服务器。为了解决这个问题，有两...
使用jQuery设置disabled属性与移除disabled属性
10-25
使用`disabled`属性的元素不仅在界面上无法交互，而且在表单提交时不会将该元素的值包含在提交的数据中。 ### 使用jQuery设置disabled属性 在jQuery中，我们可以通过`.attr()`方法来添加或修改HTML元素的属性，...
JQuery操作HTML属性
Code for Coffee
06-01 500
每一个HTML元素，都是一个DOM对象 每一个对象都会有其对应的属性 对于如图所示的img标签 src是图片的地址，可以是本地的，也可以是网络的 alt是图片信息 width是图片宽度 显示效果如下： 右键，检查 首先获取当前元素的JQuery对象 然后调用attr方法 获取其alt属性 刚刚用到的attr函数同样可以用于设置操作 我们还可以用remov...
jQuery属性操作之html属性操作
weixin_33711647的博客
08-20 139
jQuery的属性操作， 是对html文档中的属性进行读取、设置和移除操作。比如，attr()、 removeAttr()。 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1.1 使用attr()获取值 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 &l...
【JQuery学习笔记day14】HTML 属性
02-05 1104
博客较长，点击右侧目录按钮方便查看 属性 HTML元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现，比如：name=“value” 属性常用引用属性值 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotG...
关于Js、jq css html常用属性的笔记
Tzz_Ricordo的博客
06-10 798
js中: 如果写var a = function box(){ alert('xxx');  return 'haha'} 这时候 如果写a 只是单纯的写出这个函数   要调用必须写成 a ( ); 如果用cosole.log( a ) 返回的是 box() 必须用cosole.log( a( ) ); 才能返回函数的返回值 event.preventDefault() 用于取消
js和jquery设置disabled属性为true使按钮失效
12-12
设置disabled属性为true即为不可用状态。 JS document.getElementByIdx("btn").disabled=true; jquery $("#btn").attr("disabled", true); html <input type="button" value="提交" id="btn">
VUE.js实现动态设置输入框disabled属性
10-16
在Vue.js中，动态设置组件属性是常见的需求，特别是对于输入框（input）元素的`disabled`属性。`disabled`属性用于禁用一个表单元素，使得用户无法对其进行交互。在某些场景下，如编辑已有的记录时，我们可能希望...
jquery之html属性和dom属性操作
huangql517的博客
06-12 258
1&gt;html属性修改attr设置属性值或者 返回被选元素的属性值removeAttr从每一个匹配的元素中删除一个属性propprop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。removeProp用来删除由.prop()方法设置的属性集addClass（添加多个类名）为每个匹配的元素添加指定的类名。removeClass从所有匹配的元素中删除全部或者指...
设置html属性为disabled时flask后台获取数据失败
weixin_30305735的博客
08-23 216
标签input的值如果不需要用户修改，则设置属性为 readonly，不要设置为 disabled。因为设置disabled会导致flask后端获取不到这个input得value rule_maker = request.form.get('rule_maker').strip() <form class="form-horizontal form-bordered...
jq获取html标签中的属性值
12november的博客
08-17 9689
&lt;div id="text" value="12424" data_obj="42" data-name="42"&gt;&lt;/div&gt; 1、 $("#text").attr("value"); //获取html原有属性value中的值 2、 $("#text").attr("data_obj");
Flask加载Jquery不成功
plain1213的专栏
04-25 2592
使用Flask过程中发现，绑定按钮事件老是没反应。经过一系列测试后发现是Flask加载Jquery没有成功。加载别的网站的JS却没有问题。&lt;script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;后面发现是加载本地jquery的时候使用的标签type有误。正确：&...
jquery获取html属性值
我叫不知道wt
02-28 1385
JQUERY获取html标签自定义属性值或data值 //获取属性值 1 &lt; id=”text” value=”帅帅的男神”&gt; jQuery取值： $(“#text”).attr(“value”); //获取自定义属性值 2 &lt; id=”text” value=”123” data_obj=”帅帅的男神”&gt; JQUERY取值：$(“#text”).attr(“...
jq和js分别设置标签属性及样式
qq_34849013的博客
06-27 5306
attr是设置标签属性，比如设置id，设置class 而css是设置style样式的，比如设置背景色，设置显示为块级元素等。例子如下： var content=$(".divContent"); content.attr('id','divContentId'); content.css('display','block') content.css('background-c
Jquery—获取和设置html内容和属性
生如夏花 炫至茶靡
12-24 2369
1.获取内容 三个用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 用法： $(function(){ $("button").click(function(){
jq追加html属性,jQuery 操作 HTML 元素和属性的方法
weixin_35719775的博客
06-01 1288
jQuery拥有操作 HTML 元素和属性的强大方法。1. 获取HTML 元素的内容和属性(1) 获得内容: text()、html() 以及 val()方法My Test JQuery$(function(){//text() - 设置或返回所选元素的文本内容$("#btnText").click(function(){alert($("#myDiv1").text());});$("#btn...
当使用easyui时，jquery的设置disabled属性方法失效
松门一枝花
07-14 1万+
功能：选择未受洗，设置受洗时间，教堂选项 disabled 步骤： 使用了常规的jquery的方法      //两种方法设置disabled属性 　　$('#areaSelect').attr("disabled",true); 　　$('#areaSelect').attr("disabled","disabled"); 　　//三种方法移除disabled属性
JQUERY获取html标签自定义属性值或data值
热门推荐
XPY567
11-09 3万+
示例： //获取属性值 1 JQUERY取值： $("#text").attr("value"); //获取自定义属性值 2 JQUERY取值：$("#text").attr("data_obj"); //获取data值 3 JQUERY取值：$("#text").data("name");
el-radio-group 怎么设置在disabled属性为true时，显示颜色不发生变化
最新发布
05-02
<think>嗯，用户的问题是关于Element UI的el-radio-group在disabled为true时保持颜色不变的自定义样式解决方案。我需要先理解用户的具体需求。用户可能在使用el-radio-group组件时，当设置为disabled状态后，默认的样式会变灰或者颜色改变，但用户希望即使禁用状态，颜色也能保持原来的样式，比如选中后的颜色不变。 首先，我应该回忆一下Element UI的el-radio和el-radio-group组件的默认行为。当disabled为true时，组件通常会添加一些样式，比如降低透明度、改变背景色或边框颜色，以表示不可操作的状态。用户想要覆盖这些样式，保持禁用状态下的颜色与启用时一致。 接下来，我需要查看用户提供的引用内容，特别是引用[2]中提到的自定义样式方法。用户之前可能已经尝试过使用深度选择器（:deep()）来修改el-radio的样式，比如修改选中后的圆圈颜色、悬停效果等。因此，解决方案应该延续类似的方法，覆盖disabled状态下的样式。 用户的问题涉及到disabled状态下的颜色，所以需要找到对应的CSS类。在Element UI中，禁用状态通常会添加.is-disabled类到相关元素上。例如，el-radio__input.is-disabled可能会影响禁用时的样式。因此，我需要定位到这些类，并覆盖它们的颜色属性。 另外，用户提到的是el-radio-group的disabled属性，但实际样式可能作用在内部的el-radio组件上。因此，需要确保自定义样式同时应用到el-radio-group和内部的el-radio元素上。 可能的步骤包括： 1. 使用:deep()穿透Scoped CSS，覆盖Element UI的默认样式。 2. 针对.is-disabled类，重置颜色、边框、背景色等属性。 3. 特别注意选中状态下（.is-checked）的禁用样式，可能需要同时处理这两个类的组合。 例如，当el-radio处于禁用且选中状态时，其内部元素可能会有特定的样式，需要将背景色和边框色设置为原来的颜色，而不是默认的灰色。同时，文字颜色也需要调整，避免变灰。 此外，用户可能需要处理鼠标悬停时的样式，即使禁用状态，也可能不希望出现hover效果，或者保持原有颜色。但根据用户需求，可能只需覆盖禁用状态下的静态样式，而悬停效果可能不需要调整，因为禁用状态下用户无法交互。 最后，需要验证解决方案的有效性，确保在禁用状态下颜色确实保持不变，并且没有冲突的其他样式。可能需要使用浏览器的开发者工具检查元素，确认自定义样式是否正确应用，并覆盖了默认样式。 总结，解决方案应通过CSS深度选择器，针对禁用状态下的各个部分（如圆圈、标签文字等）进行样式覆盖，设置所需的颜色属性，并确保在禁用且选中状态下样式正确。</think>针对Element UI的`el-radio-group`组件在禁用状态下保持原有颜色的需求，可通过以下步骤实现样式自定义： ### 一、禁用状态颜色保持方案 ```html <style scoped> /* 穿透组件作用域 */ :deep() .el-radio-group.is-disabled .el-radio { /* 禁用状态下整体透明度保持 */ opacity: 1; /* 禁用时单选框圆圈样式 */ .el-radio__input.is-disabled .el-radio__inner { background-color: #008454; /* 保持选中颜色 */ border-color: #008454; opacity: 0.6; /* 可调整透明度表示禁用状态 */ } /* 禁用时文字颜色保持 */ .el-radio__label { color: red !important; /* 保持原有标签颜色 */ } /* 禁用且选中时的内部对勾样式 */ .el-radio__input.is-checked.is-disabled .el-radio__inner::after { border-color: white; /* 保持对勾颜色 */ } /* 禁用时hover状态清除 */ .el-radio__input.is-disabled:hover .el-radio__inner { border-color: #008454 !important; /* 保持原边框色 */ } } </style> ``` ### 二、实现原理说明 1. **穿透组件层级** 使用`:deep()`穿透scoped样式限制，定位到`el-radio-group`内部DOM结构[^2] 2. **关键样式覆盖** - `.is-disabled`类控制禁用状态 - `opacity:1`覆盖默认的透明度变化 - `background-color`和`border-color`强制保持原色 - `!important`提升样式优先级 3. **状态组合处理** 同时处理`.is-checked.is-disabled`双重状态，确保选中禁用时的样式一致性 ### 三、效果验证代码 ```html <el-radio-group v-model="value" disabled> <el-radio label="1">选项A</el-radio> <el-radio label="2">选项B</el-radio> </el-radio-group> ``` 此时禁用状态单选框将保持： - 选中项背景色为#008454（半透明） - 标签文字保持红色 - 内部对勾保持白色
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值