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 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
js实现表格字段排序
Feb 19 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
mysql建立外键
2006/11/25 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
小程序实现录音功能
2020/09/22 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
全面解读Python Web开发框架Django
2014/06/30 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
身份证丢失证明
2015/06/19 职场文书