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的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
jQuery常用选择器详解
Jul 17 jQuery
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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
解析argc argv在php中的应用
2013/06/24 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
js实现日历
2020/11/07 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python中hashlib模块用法示例
2017/10/30 Python
Python反射的用法实例分析
2018/02/11 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
python切割图片的示例
2020/11/12 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
土木工程师岗位职责
2013/11/24 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
推广普通话演讲稿
2014/05/23 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS