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中setInterval的用法总结
Nov 20 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php探针不显示内存解决方法
2019/09/17 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
房屋租赁协议书范本
2014/04/10 职场文书
园艺师求职信
2014/04/27 职场文书
篮球比赛策划方案
2014/06/05 职场文书
社团活动总结报告
2014/06/27 职场文书
租房安全协议书
2014/08/20 职场文书
小学运动会报道稿
2014/10/04 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python