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 parseInt 函数分析(转)
Mar 21 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
jquery分割字符串的方法
Jun 24 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 咖啡文化
文件上传程序的全部源码
2006/10/09 PHP
global.php
2006/12/09 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python实现报表自动化详解
2017/11/16 Python
python实现简单日期工具类
2019/04/24 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python numpy实现rolling滚动案例
2020/06/08 Python
自学python用什么系统好
2020/06/23 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
python包的导入方式总结
2021/03/02 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
移风易俗倡议书
2014/04/15 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android