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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js中call与apply的用法小结
Dec 28 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
javascript用函数实现对象的方法
May 14 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python的Template使用指南
2014/09/11 Python
Python中的with...as用法介绍
2015/05/28 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Django中ORM的基本使用教程
2020/12/22 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
前台领班岗位职责
2013/12/04 职场文书
幼儿园安全责任书
2014/04/14 职场文书
我的祖国演讲稿
2014/05/04 职场文书
党建工作整改措施
2014/10/28 职场文书
学习保证书100字
2015/02/26 职场文书
保卫工作个人总结
2015/03/03 职场文书
退休教师追悼词
2015/06/23 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
关于 Python json中load和loads区别
2021/11/07 Python