jquery中添加属性和删除属性


Posted in Javascript onJune 03, 2015

jquery中添加属性和删除属性:

$("#2args").attr("disabled",'disabled');

$("#2args").removeAttr("disabled");

问题背景:

选择“选项1”是,“两个参数”这个单选按钮有效。

选择“选项2”时,让“两个参数”的这个单选按钮无效。

代码:

<!DOCTYPE>
<html >
<head>
 <meta charset="utf-8" />
 <title>demo</title>
 <style type="text/css">
.control-group{
 margin-bottom: 20px;
}
.controls{
 display: inline-block;
 vertical-align: top;
}
form{
 border:1px dotted #666;
 padding: 30px;
 display: inline-block;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
 cursor: not-allowed;
}
 </style>
<body>
 <form method="post" action="" onsubmit="return false;">
  <div class="control-group">
   <label for="project_name">名称:</label>
   <input name="project_name" maxlength="20" id="project_name" placeholder="项目名称"></div>
  <div class="control-group">
   <label>类型:</label>
   <select id="project_type" onchange="typeChange()">
    <option value="" disabled="disabled"></option>
    <option value="" disabled="disabled">------  [ 类型一 ]  ------</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="" disabled="disabled"></option>
    <option value="" disabled="disabled">------  [ 类型二 ]  ------</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
   </select>
  </div>
  <div class="control-group">
   <label>参数:</label>
   <div class="controls">
    <br/>
    <label class="radio" for="1arg">
     <input type="radio" name="nodes" id="1arg" value="1" checked="checked" />
     单个参数
    </label>
    <br/>
    <label class="radio" for="2args">
     <input type="radio" name="nodes" id="2args" value="2" />
     两个参数
    </label>
    <br/>
    <label class="radio" for="3args" >
     <input type="radio" name="nodes" id="3args" value="3" disabled="disabled" />
     三个参数
    </label>
   </div>
  </div>
  <div class="control-group">
   <button id="create_project" type="submit" onclick="beforecreate()">新建</button>
   <button >取消</button>
  </div>
 </form>
 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 <script type="text/javascript">
function typeChange(){
 var typeLists=['1','2','3','4','5','6'];
 var pj_type=$("#project_type option:selected").val();
 if(pj_type==2){
  $("#2args").attr("disabled",'disabled');
 }else if(pj_type==1){
  $("#2args").removeAttr("disabled");
 }else if($.inArray(pj_type, app_type_list)>=0){
  //后期扩展功能
 }
}
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js实现跨域的多种方法
Dec 25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 #Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 #Javascript
在HTML中插入JavaScript代码的示例
Jun 03 #Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 #Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 #Javascript
浅谈javascript中基本包装类型
Jun 03 #Javascript
js中函数声明与函数表达式
Jun 03 #Javascript
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python中dir函数用法分析
2015/04/17 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
大学生万能检讨书范例
2014/10/04 职场文书
服务员岗位职责范本
2015/04/09 职场文书
安全温馨提示语大全
2015/07/14 职场文书
入党转正申请书范文
2019/05/20 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript