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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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中动态显示签名和ip原理
2007/03/28 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Python性能优化技巧
2015/03/09 Python
django的csrf实现过程详解
2019/07/26 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Django中的AutoField字段使用
2020/05/18 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
关于热爱祖国的演讲稿
2014/05/04 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
语文教师求职信范文
2015/03/20 职场文书
大学生活感想
2015/08/10 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis