jquery對標籤新增唯讀（readonly）或者禁用（disabled）屬性

2022-03-20 10:00:06

一、jQuery

jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 程式設計。
jQuery 很容易學習。

範例：

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

原始碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你點我，我就會消失。</p>
<p>繼續點我!</p>
<p>接著點我!</p>
</body>
</html>

執行結果：

上圖執行結果只要點選文字就會消失，感興趣的小夥伴可以下去試一下

二、關於readonly屬性

例1、jquery 設定readonly屬性

$('input').attr("readonly","readonly") //將input元素設定為readonly
$('input').removeAttr("readonly"); //去除input元素的readonly屬性
  
if($('input').attr("readonly") == true)//判斷input元素是否已經設定了readonly屬性

例2、對於為元素設定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屬性

三、jquery 設定disabled屬性

例1、jquery 設定disabled屬性

$('input').attr("disabled","disabled")//將input元素設定為disabled
$('input').removeAttr("disabled");//去除input元素的disabled屬性
  
if($('input').attr("disabled")==true)//判斷input元素是否已經設定了disabled屬性

例2、對於為元素設定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屬性

四、jquery動態新增文字方塊的readonly唯讀屬性

<input id="test" type="text"  />
 
 $("#test").attr({"readonly":"readonly"}); //新增readonly屬性
 // 或者
 $("#ID").attr({ readonly: 'true' });

 $("#test").removeAttr("readonly");    //去除readonly屬性

到此這篇關於jquery對標籤新增唯讀（readonly）或者禁用（disabled）屬性的文章就介紹到這了,更多相關jquery對標籤新增唯讀或禁用屬性內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

jquery對標籤新增唯讀（readonly）或者禁用（disabled）屬性

目錄

一、jQuery

二、關於readonly屬性

三、jquery 設定disabled屬性

四、jquery動態新增文字方塊的readonly唯讀屬性

熱門文章