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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
js数组的操作指南
Dec 28 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
angular.element方法汇总
2015/01/07 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
Python中字符串对象语法分享
2022/02/24 Python