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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 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(二)
2012/03/21 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
js实现左右轮播图
2020/01/09 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
tensorflow 查看梯度方式
2020/02/04 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
节约粮食标语
2014/06/18 职场文书
大学生心理活动总结
2014/07/04 职场文书
人事局接收函
2015/01/31 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
六年级作文之预言作文
2019/10/25 职场文书