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

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

### 作用范围： ###

`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`获取元素 ##

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

--------------------

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

1.  依次过滤

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

1.  属性选择

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

1.  直接  
    直接用 `$(“.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属性