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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python 2.7中文显示与处理方法
2018/07/16 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
倡议书格式
2014/08/30 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
Golang: 内建容器的用法
2021/05/05 Golang