jQuery設定disabled屬性與移除disabled屬性

風靈使發表於2018-10-11
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>

  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屬性

相關文章