jQuery设置disabled属性与移除disabled属性

客官°小女子只卖身不卖艺 2021-06-26 16:06 851阅读 0赞

作用范围:

Readonly只针对inputtextarea有效,而disabled对于所有的表单元素都有效。

表单中readOnlydisabled的区别:

Readonly只针对input(text/ password)textarea有效,而disabled对于所有的表单元素都有效,包括select,radio, checkbox, button等。

但是表单元素在使用了disabled后,当我们将表单以POSTGET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabledreadonly,但是submitbutton却是可以使用的)。

js操作:

代码如下:

  1. function disableElement(element,val){
  2. document.getElementById(element).disabled=val;
  3. }

jQuery进行操作:

代码如下:

  1. //两种方法设置disabled属性
  2. $('#areaSelect').attr("disabled",true);
  3. $('#areaSelect').attr("disabled","disabled");
  4. //三种方法移除disabled属性
  5. $('#areaSelect').attr("disabled",false);
  6. $('#areaSelect').removeAttr("disabled");
  7. $('#areaSelect').attr("disabled","");

获取s:textfield,并设置其disabled属性:

代码如下:

  1. functiondisableTextfieldofAccountDiv(element,val)
  2. {
  3. $(element).find(":textfield").attr('disabled',val);
  4. }

jquery 根据多个class获取元素

  1. <div class = "a b"></div>
  1. 交集选择: $(".a.b") --选择同时包含a和b的元素
  2. 并集选择:$(".a, .b") --选择包含a或者包含b的元素

jquery如何选择带有多个class的元素

  1. 依次过滤

    $(“.good”).filter(“.list”).filter(“.Card”)

  2. 属性选择

    $(“[class=’good list Card’]“); //此处 顺序必须一致才行

  3. 直接
    直接用 $(“.good.list.Card”)


jQueryaddClass方法同时增加多个class属性

一句话代码

  1. $("#obj").addClass("className1 className2");

jQuery removeClass 移除多个标签

jQuery removeClass 技巧_移除多个标签

  1. $('.xx').attr('class','a b c');
  2. $('.xx').removeClass('a');

但是突然之间,需要我一次性清除掉两个class,那么这个时候我就懵了,怎么在不影响之前存在的class的情况下移除多个值呢?第一反应就是去w3cschool寻找答案,并获取了解决方法:

  1. //只需要通过空格来间隔 class 值即可一次性清除掉多个 class
  2. $('.xx').removeClass('a b c');

jQuery 多个类 选择器

实例
选取 class"intro"、"demo""end" 的所有元素:

  1. $(".intro,.demo,.end")

定义和用法
.class 选择器可用于选取多个 class

注意:用逗号分隔每个 class

注意:不要使用数字开头的 class 属性!在某些浏览器中可能出问题。

语法

  1. $(".class1,.class2,.class3,...")

jQuery选择inputclass属性写了多个值的情况

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <script src="js/jquery-1.6.2.js" type="text/javascript"></script>
  5. <style type="text/css"> .content { text-align: left; font-weight: normal; color: #000000; font-size: 9pt; vertical-align: bottom; } .my_sh { } </style>
  6. <script type="text/javascript"> function getClassVal(){ jQuery("#1").val(); //只能取到一个id的值 jQuery(".content.my_sh").show(); //可以显示所有input框 } </script>
  7. </head>
  8. <body>
  9. <input type="text" id="1" class="content my_sh" value="1" />
  10. <input type="text" id="2" class="content my_sh" value="2" />
  11. <input type="text" id="3" class="content my_sh" value="3" />
  12. <input type="text" id="4" class="content my_sh" value="4" />
  13. </body>
  14. </html>

【注】:input中的class属性中的多个值之间要有空格,jQuery在取值的时候每个class值之间不能有空格。


JQuery禁止/恢复按钮readonlydisabled小结

禁止/恢复按钮
其实就是更改 的属性。

禁用 idbtn 的按钮:

  1. $("#btn").attr({ "disabled":"disabled"});
  2. //或者
  3. $("#btn").attr("disabled","disabled");
  4. 取消禁用:
  5. ```javascript
  6. $("#btn").removeAttr("disabled");
  7. //或者
  8. $("#btn").attr("disabled","");

JQuery对元素应用disabled和readonly属性的方法:

1.readonly

  1. $(‘input’).attr(“readonly”,”readonly”)//将input元素设置为readonly
  2. $(‘input’).removeAttr(“readonly”);//去除input元素的readonly属性
  3. if($(‘input’).attr(“readonly”)==true)//判断input元素是否已经设置了readonly属性

对于为元素设置readonly属性和取消readonly属性的方法还有如下两种:

  1. $(‘input’).attr(“readonly”,true)//将input元素设置为readonly
  2. $(‘input’).attr(“readonly”,false)//去除input元素的readonly属性
  3. $(‘input’).attr(“readonly”,”readonly”)//将input元素设置为readonly
  4. $(‘input’).attr(“readonly”,”")//去除input元素的readonly属性

2.disabled

  1. $(‘input’).attr(“disabled“,”disabled“)//将input元素设置为disabled
  2. $(‘input’).removeAttr(“disabled“);//去除input元素的disabled属性
  3. if($(‘input’).attr(“disabled“)==true)//判断input元素是否已经设置了disabled属性

对于为元素设置disabled属性和取消disabled属性的方法还有如下两种:

  1. $(‘input’).attr(“disabled“,true)//将input元素设置为disabled
  2. $(‘input’).attr(“disabled“,false)//去除input元素的disabled属性
  3. $(‘input’).attr(“disabled“,”disabled“)//将input元素设置为disabled
  4. $(‘input’).attr(“disabled“,”")//去除input元素的disabled属性

发表评论

表情:
评论列表 (有 0 条评论,851人围观)

还没有评论,来说两句吧...

相关阅读