jquery设置元素readonly和disabled(checkbox只读)

发布时间:2020-10-08编辑:脚本学堂
本文介绍了jquery设置元素readonly与disabled属性的一些例子,包括设置checkbox为只读的方法,感兴趣的朋友可以参考下。

jquery api中提供了对元素应用disabledreadonly属性的方法:
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属性 

3,关于checkbox的(checkbox看是否为一组是用name值相同来判断的)
因为checkbox本身并没有提供readonly方法,而用了disabled会变成灰色,所以找了俩个方法

方式一: 
checkbox没有readOnly属性,如果使用disabled=“disabled”属性的话,会让checkbox变成灰色的,用户很反感这种样式可以这样让它保持只读: 
设置:onclick="return false"   
js中:checkbox.onclick=function(){return false;};  
 
方式二: 
 

复制代码 代码示例:
<script src="Demo3.1/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script language="javascript"> 
 $(function(){ 
 $("input[type='checkbox']").click( 
  function(){ 
   this.checked = !this.checked; 
   } 
  ); 

); 
</script> 

4,select设置只读
使用disabled吧,没有找到类似checkbox这种方案,取值只好用hidden了。