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>

jquery对标签属性操作的更多相关文章

  1. jQuery attr removeAttr 属性操作

    jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...

  2. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

  3. jQuery对象的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  4. jQuery 获取标签属性值的问题

    jquery attr()无法获取属性值问题 css里明明已经设置过了: 可还是获取不了: 求指导.   一定是undefined,attr是用来获得或设置标签属性的,不是用来获得CSS属性的.如果你 ...

  5. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  6. jQuery原生框架-----------------属性操作

    // 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 i ...

  7. jQuery基本的属性操作

    attr和prop,prop常用来操作标签的固有属性,比方说checkbox的checked属性.select的selected属性,而attr常用来操作我们自己给标签添加的属性. $('div'). ...

  8. jquery中attr属性操作

  9. jquery中val属性操作

随机推荐

  1. Mondrian – 开源的矢量图形 Web 应用程序

    Mondrian 是一个免费矢量图形 Web 应用程序,类似 Adobe Illustrator 或 Inkscape.Mondrian 提供所有所需的工具来创建.修改和导出简单的 SVG 文件,过历 ...

  2. 拖放 js

    之前被小伙伴问自己能不能写一个简单的原生的 我稍微犹豫了下  这次重新学习下拖拽的过程  分享下  参考 JavaScript高级程序设计 必要的准备 自定义事件(实现事件模型)  简单来说事件模型就 ...

  3. 【追寻javascript高手之路02】变量、作用域知多少？

    前言 本来想把这个与上篇博客写到一起的,但是考虑到是两个知识点还是分开算了,于是我们继续今天的学习吧. 基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引 ...

  4. xwamp 目录结构设计

    xwamp 目录结构设计原文来自:http://www.xwamp.com/make/directory-structure. 目录说明 所有程序都统一放在D盘下的xwamp目录. 目录列表 Apac ...

  5. 调用CRM自己的Dialogue

    var DialogOption = new Xrm.DialogOptions; DialogOption.width = document.body.clientWidth * 0.9; Dial ...

  6. Angular JS | Closure | Google Web Toolkit | Dart | Polymer 概要汇集

    AngularJS | Closure | Google Web Toolkit | Dart | Polymer GWT https://code.google.com/p/google-web-t ...

  7. '[<NSObject 0x8a4b500> setValue:forUndefinedKey:]

    Bug如下: Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[ setValue:forUnd ...

  8. 浅谈TabLayout(ViewPager+Tab联动)

    google发布了的Android Support Design库中提供了TabLayout 通过TabLayout+ViewPager实现导航栏效果,点击Tab ,ViewPager跟随变化,滑动V ...

  9. clang -rewrite-objc的使用点滴

    ➠更多技术干货请戳:听云博客 clang -rewrite-objc的作用是把oc代码转写成c/c++代码,我们常用它来窥探OC的一些秘密. 1.最简单的例子 main.m的代码如下: int mai ...

  10. 网络热恋之json解析

    现在的app开发很少有用到XML解析的了,主流的则是JSON. // // ViewController.m // CX-JSON解析(三方JSONKit-master) #import " ...