jquery对标签属性操作

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>
时间: 2024-12-29 07:23:47

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

jQuery 获取标签属性值的问题

jquery attr()无法获取属性值问题 css里明明已经设置过了: 可还是获取不了: 求指导. 一定是undefined,attr是用来获得或设置标签属性的,不是用来获得CSS属性的.如果你有id是nn1的标签,可以用ww=$("#nn1").css("top");来获得CSS属性. 标签属性和css属性怎么区别 追答 <script type="text/javascript"> $(document).ready(funct

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

// 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 if( !jQuery.isDOM( dom ) || !jQuery.isString( styleName ) ) { return false; } // 兼容获取指定的样式 if( window.getComputedStyle ) { return window.getComputedSty

JQuery基础及css和属性操作 其他函数

JQuery语法 使用JQuery必须先导入jquery-X.X.X.js文件 jQuery中的选择器       $("选择器名称").函数名(); 注意     $ 是jQuery的缩写,也就是说,选择器可以使用jQuery(":input") jQuery   文档就绪函数 $(document).ready(function(){ //jQuery代码 console.log($(":input:disabled")), }); 简写文档

jquery源码解析:jQuery对元素属性的操作2

这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2");     //给元素div的class属性添加box1和box2 $("#div1").removeClass("box1");     //删除元素div的class属性值box1 $("#div1").toggleClass("

jquery源码解析:jQuery对元素属性的操作1

我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来看下一些方法是如何使用的? $("#div1").attr("title","hello") ,设置属性,两个参数时. $("#div1").attr("title") , 获取属性值,一个参数时. $(&qu

jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div").css("background","pink"); 类操作 .addClass添加类   $("div").addClass("class"); .removeClass删除类   $("div).removeCla

js、jquery、h5 类\属性操作的笔记总结

① js操作                                                                   /var div = document.getElementById('d1'); /两种方式不能交换使用,赋值和获取值必须使用用一种方法.var div = document.getElementById("box");//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上,能获取.div.aaaa = "1111&

37.前端jQuery之属性操作

属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置,以及移除,如prop().removeProp() 类样式操作:指对DOM属性className进行添加,移除操作.比如addClass().removeClass().toggleClass() 值操作:对DOM属性value进行读取和设置操作.比如html().text().val() att

前端基础-jQuery中的如何操作标签

阅读目录 样式操作 文本操作 属性操作 文档操作 一.样式操作 1.样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加. ①.addClass( className )方法: 通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一