表單中的readonly與disable的區別（zhuan）

jquery設置元素的readonly和disabled

 

Jquery的api中提供了對元素應用disabled和readonly屬性的方法，在這裏記錄下。以下：

1.readonly

  　
Js代碼  收藏代碼

    $('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

 

 
Js代碼  收藏代碼

    $('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屬性  

 

 

總結：

Readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效，包括select, radio, checkbox, button等。

 

共同點：都不能編輯和獲取焦點。

readonly:使用表單post或get傳遞時會被傳遞出去。

 

disable：使用表單post或get傳遞時不會被傳遞出去。

可是readonly的顯示效果是沒有灰化的。

 

全部控件都有disabled 屬性，可是不必定有readonly屬性；點擊被readonly掉的按鈕照樣能夠觸發事件，可是被disabled掉的按鈕就沒法使用了無論上面有沒有事件。

 

小技巧: 能夠給readonly設置一個css樣式：

style="background-color:#cccccc;" 

這樣readonly的顯示效果就和disable同樣了

 

若是一個輸入項的disabled設爲true，則該表單輸入項不能獲取焦點，用戶的全部操做（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。 

 

而readonly只是針對文本輸入框這類能夠輸入文本的輸入項，若是設爲true，用戶只是不能編輯對應的文本，可是仍然能夠聚焦焦點，而且在提交表單的時候，該輸入項會做爲form的一項提交。