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

最新推荐文章于 2023-05-16 18:55:24 发布

转载最新推荐文章于 2023-05-16 18:55:24 发布 · 1.5w 阅读

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文详细解析了HTML表单中readOnly与disabled属性的区别，探讨了它们在不同元素上的适用性及提交行为。同时，提供了使用JavaScript和jQuery操作这两种属性的具体方法。

作用范围：

Readonly只针对input和textarea有效，而disabled对于所有的表单元素都有效。

表单中`readOnly`和`disabled`的区别：

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

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

js操作：

代码如下:

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

jQuery进行操作：

代码如下:

//两种方法设置disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");

//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");

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

代码如下:

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

`jquery` 根据多个`class`获取元素

<div class = "a b"></div>

交集选择： $(".a.b") --选择同时包含a和b的元素。
并集选择：$(".a, .b") --选择包含a或者包含b的元素。

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

依次过滤

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

属性选择

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

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

`jQuery`用`addClass`方法同时增加多个`class`属性

一句话代码

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

jQuery `removeClass` 移除多个标签

jQuery removeClass 技巧_移除多个标签

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

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

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

`jQuery` 多个类选择器

实例
选取 class 为 "intro"、"demo" 或 "end" 的所有元素：

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

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

注意：用逗号分隔每个 class。

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

语法

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

`jQuery`选择`input`的`class`属性写了多个值的情况


<html>

   <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <script src="js/jquery-1.6.2.js" type="text/javascript"></script>

      <style type="text/css">

       .content {
          text-align: left;
          font-weight: normal;
          color: #000000;
          font-size: 9pt;
          vertical-align: bottom;
        }

        .my_sh {
 
        }

      </style>

      <script type="text/javascript">

        function getClassVal(){

           jQuery("#1").val();   //只能取到一个id的值
           jQuery(".content.my_sh").show();   //可以显示所有input框

        }

      </script>

   </head>

   <body>

      <input type="text" id="1" class="content my_sh" value="1" />

      <input type="text" id="2" class="content my_sh" value="2" />

      <input type="text" id="3" class="content my_sh" value="3" />

      <input type="text" id="4" class="content my_sh" value="4" />

   </body>

</html>

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

`JQuery`禁止/恢复按钮`readonly`和`disabled`小结

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

禁用 id 为 btn 的按钮：

$("#btn").attr({"disabled":"disabled"});
//或者
$("#btn").attr("disabled","disabled");


取消禁用：
```javascript
$("#btn").removeAttr("disabled");
//或者
$("#btn").attr("disabled","");

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

1.`readonly`

$(‘input’).attr(“readonly”,”readonly”)//将input元素设置为readonly
$(‘input’).removeAttr(“readonly”);//去除input元素的readonly属性

if($(‘input’).attr(“readonly”)==true)//判断input元素是否已经设置了readonly属性

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

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

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

2.`disabled`

$(‘input’).attr(“disabled“,”disabled“)//将input元素设置为disabled
$(‘input’).removeAttr(“disabled“);//去除input元素的disabled属性

if($(‘input’).attr(“disabled“)==true)//判断input元素是否已经设置了disabled属性

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

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

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