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自然分类法算法实现代码
Oct 11 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
javascript数据类型详解
Feb 07 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
学习委员自我鉴定
2014/01/13 职场文书
师范生自我鉴定
2014/03/20 职场文书
村级换届选举方案
2014/05/10 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
高考学习决心书
2015/02/04 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
python执行js代码的方法
2021/05/13 Python
以下牛机,你有几个
2022/04/05 无线电
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技