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显示隐藏层比较不错的方法分析
Sep 30 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
JavaScript异步加载问题总结
Feb 17 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
python daemon守护进程实现
2016/08/27 Python
python 自动去除空行的实例
2018/07/24 Python
详解python播放音频的三种方法
2019/09/23 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
Java程序员综合测试题
2014/04/25 面试题
新闻学专业求职信
2014/07/28 职场文书
师德师风剖析材料
2014/09/30 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
超市采购员岗位职责
2015/04/07 职场文书
新入职员工工作总结
2015/10/15 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python