设置disabled属性

最新推荐文章于 2021-07-06 17:02:09 发布
最新推荐文章于 2021-07-06 17:02:09 发布
阅读量955 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/macfac/article/details/43603229

//两种方法设置disabled属性

　　$('#areaSelect').attr("disabled",true);

　　$('#areaSelect').attr("disabled","disabled");

　　//三种方法移除disabled属性

　　$('#areaSelect').attr("disabled",false);

　　$('#areaSelect').removeAttr("disabled");

　　$('#areaSelect').attr("disabled","");

分别通过javaScript和jquery控制display属性是否显示
NullPointerException的博客
05-04 611
js<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>display</title> <script type=&quo
JQuery设置和去除disabled属性 与 display显示隐藏
weixin_30808575的博客
09-10 1100
//两种方法设置disabled属性 　　$('#areaSelect').attr("disabled",true); 　　$('#areaSelect').attr("disabled","disabled"); 　　//三种方法移除disabled属性 　　$('#areaSelect').attr("disabled",false); 　　$('#areaSelect').rem...
js,jq,jquery删除css属性
G佳伟
03-25 1816
属性值是不能删除的，只能改变属性值达到我们想要的效果 1.去掉div的高度 <div style='height:50px' id='height'></div> <script> $('#height').css('height','auto') </script> 2.去掉div的display属性使div显示出来 <div sty...
jquery修改display属性
ruoshui09172104的博客
05-12 1万+
jquery修改display属性 /js/jquery-1.8.0.min.js"> $(function(){ $("#bt1").click(function(){ $('#re1').css("display","block"); }); $("#bt2").click(function(){ $('#re1').css("display","no
将某个标签加上disabled的属性
qq_20426717的博客
03-24 1509
$("#CUST_CODE").attr("disabled","true"); 刷新指定的页面 window.parent.frames["VisitLine_ShowCustomer"].location.reload();
Jquery删除css属性
taoerchun的专栏
05-10 1751
有时我们不需要某个css属性时，想删除它，但有没有removeCss方法，怎么办呢？可以使用如下方法解决 $('选择器').css('css属性','');   即将css属性值赋值为空，页面中就不会显示该css属性了。  如：$('.div1').css('opacity','');
使用jQuery设置disabled属性与移除disabled属性
12-10
// 设置disabled属性 $('#areaSelect').attr('disabled', true); $('#areaSelect').attr('disabled', 'disabled'); // 移除disabled属性 $('#areaSelect').attr('disabled', false); $('#areaSelect').removeAttr('...
js和jquery设置disabled属性为true使按钮失效
10-25
// 设置disabled属性为true，使按钮失效 btn.disabled = true; ``` 在上述代码中，`getElementById`函数接收一个字符串参数，这个参数是我们要操作的按钮元素的id。返回的是一个DOM对象，通过`.disabled`属性将其...
设置disabled属性后台读不到数据如何让select支持readonly
09-28
然而，一个常见的问题是，当`disabled`属性被设置在`<select>`元素上时，后台程序在提交表单时可能无法获取到选中的选项值。这是因为`disabled`状态的表单元素不会作为POST数据发送到服务器。为了解决这个问题，有两...
jq里修改html属性,使用jquery修改display属性
weixin_39787792的博客
06-03 479
display是css的标准属性之一，常用的display属性值有：block : 块对象的默认值。用该值为对象之后添加新行none : 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline : 内联对象的默认值。用该值将从对象中删除行使用jquery设置css，就知道如何使用jquery修改display了，代码如下：$('#test').css...
JQ 添加移除属性
kxukai的博客
01-09 200
使用jquery修改display属性
weixin_30781107的博客
06-05 522
ar show = $('#test').css('display'); $('#test').css('display',show =='block'?'none':show); 这段代码通过判断当前元素的display的值来设置它的display值，如果是none就设成block，如果是block就设置成none，从而实现了隐藏和现实的切换。 转载于:https://www.cnblo...
Jquery 对控件 display属性的管理
sardine-z
01-11 2921
html/jsp style="display:none" js  显示或隐藏 $('#bookDiv').css('display','none');  $('#bookDiv').css('display','block');
js 禁用和解除禁用按钮_页面按钮禁用与解除禁用的方法
weixin_33249310的博客
01-17 1242
计时器和延时器的概念//--计时器// 计时器ID号 setInterval(回调函数, 毫秒数);// 每隔指定毫秒数，调用一次回调函数// clearInterval(计时器ID号)// 停止指定ID号的计时器(实际上是销毁释放资源了)//--延时器// 延时器Id号 setTimeout(回调函数, 毫秒间隔)// 从调用开始，等待指定毫秒数后调用一次回调函数，结束// 使用clearTim...
清除css的display属性
热门推荐
大道至简，开发由我！
04-03 1万+
今天在项目中遇到了一个要清除display属性的问题，整了半天才搞好，给大家分享一下。 var b=$(obj).attr(‘id’); var a=document.getElementsByName(b); for(var i=0;i<a.length;i++) { if(a[i].style.display==’none’){ a[i].style.display=”; }else
disabled属性的添加与移除
longe20111104的博客
07-06 1995
disabled属性的添加与移除 //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); //三种方法移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("disabled"); $('#areaSelect').attr("disab
jqery对选中的select添加背景色,失去焦点取消背景色.
weixin_34417814的博客
10-31 607
通过focus和blur事件添加对应的css,不过select需要点击2下,才会展开子选项,通过实验,最后完美解决该问题.$("table").delegate("select","click, mousedown, focus",function(){ $(this).addClass("selected"); }).delegate("select","blur",f...
attr属性disabled
knn的博客
09-02 7085
jquery添加属性 1:$("#role").attr("disabled","disabled"); 当属性设置为disabled时，提交表单时，select的值无法传递； 2:在提交表单设置以下： $("#role").removeAttr("disabled"); ...
vue项目 对elementui的 from 表单可以设置disabled属性为多个条件吗？
最新发布
06-25
<think>我们正在讨论Vue.js项目中ElementUI的表单组件，特别是关于`disabled`属性如何设置多个条件的问题。根据ElementUI文档，Form表单中的表单项（如el-input,el-select等）可以使用`disabled`属性来禁用。我们可以通过动态绑定`:disabled`来实现根据多个条件控制禁用状态。思路：1.在表单组件的`disabled`属性上使用动态绑定（v-bind，即`:disabled`）。2.将多个条件组合成一个表达式，例如使用逻辑运算符（&&,||）或计算一个返回布尔值的计算属性（computed）或方法（methods）。示例：假设我们有一个表单，其中有一个输入框，我们希望它在满足多个条件时被禁用，比如当变量`condition1`为真且`condition2`为假时禁用。我们可以直接在模板中写表达式：:disabled="condition1&&!condition2"或者如果条件更复杂，我们可以使用计算属性：computed:{isDisabled(){returnthis.condition1&&!this.condition2;}}然后在模板中：:disabled="isDisabled"这样，当条件变化时，计算属性会自动重新计算，从而更新disabled状态。另外，如果条件需要从多个数据源获取，或者需要异步处理，计算属性同样适用。注意：在Vue中，我们应该避免在模板中写过于复杂的表达式，如果表达式很长或者逻辑复杂，推荐使用计算属性。因此，在ElementUI的表单中，我们可以通过上述方式实现多个条件控制disabled状态。下面是一个简单的代码示例，展示如何在ElementUI的表单中使用计算属性来控制disabled状态：```html<template><el-form:model="form"label-width="80px"><el-form-itemlabel="活动名称"><el-inputv-model="form.name":disabled="isDisabled"></el-input></el-form-item></el-form></template><script>exportdefault{data(){return{form:{name:''},condition1:true,condition2:false};},computed:{isDisabled(){//这里可以根据多个条件返回布尔值returnthis.condition1&&!this.condition2;}}};</script>```在这个例子中，输入框的禁用状态由计算属性`isDisabled`决定，它根据`condition1`和`condition2`的值计算得出。因此，答案是肯定的：ElementUI的Form表单可以设置disabled属性为多个条件，通过动态绑定和计算属性（或方法）实现。相关问题：1.在Vue中，计算属性和方法在用于动态绑定disabled时有什么区别？2.ElementUI表单中，如何根据其他表单项的值来动态禁用当前表单项？3.除了disabled属性，ElementUI表单还有哪些属性可以动态控制？</think>在 Vue.js 项目中，Element UI 的 Form 表单组件可以轻松实现基于多个条件的 `disabled` 状态控制。以下是几种实现方式： ### 1. 使用计算属性（推荐） ```html <template> <el-form :model="form"> <el-form-item label="用户名"> <el-input v-model="form.username" :disabled="isUsernameDisabled" ></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', userType: 'guest', isVerified: false } } }, computed: { isUsernameDisabled() { // 多个条件组合：用户类型为guest且未验证 return this.form.userType === 'guest' && !this.form.isVerified; } } } </script> ``` ### 2. 直接在模板中使用逻辑表达式 ```html <el-input v-model="form.email" :disabled="form.status === 'inactive' || form.quotaExceeded" ></el-input> ``` ### 3. 使用方法返回状态 ```html <el-select v-model="form.role" :disabled="shouldDisableField('role')" > <!-- 选项 --> </el-select> ``` ```javascript methods: { shouldDisableField(fieldName) { const conditions = { role: this.form.isAdmin && this.form.tenantLocked, email: this.form.isExternalUser }; return conditions[fieldName] || false; } } ``` ### 4. 结合多个条件对象 ```javascript data() { return { disableConditions: { condition1: true, condition2: false, condition3: true } } }, computed: { isDisabled() { return Object.values(this.disableConditions).every(Boolean); } } ``` ### 关键点说明： 1. **动态绑定**：使用 `:disabled` 进行动态绑定（不是静态的 `disabled`） 2. **条件组合**：可使用 `&&`(与)、`||`(或)、`!`(非) 组合多个条件 3. **响应式更新**：当依赖的 data 属性变化时，禁用状态会自动更新 4. **复杂逻辑**：对于复杂条件，推荐使用计算属性保持模板简洁 5. **表单级控制**：也可在 `<el-form>` 设置 `:disabled="globalDisabled"` 实现全局禁用 > 示例参考：[Element UI 表单文档](https://element.eleme.io/#/zh-CN/component/form)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y_JY

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值