类别:前端知识

日期:2022-04-03 浏览:2026 评论:0

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jquery api中提供了对元素应用disabled和readonly属性的方法:
1,readonly
 

代码示例:
1
2
3
$('input').attr("readonly","readonly")//将input元素设置为readonly 
$('input').removeAttr("readonly");//去除input元素的readonly属性 
if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

 

对于为元素设置readonly属性和取消readonly属性的方法还有如下两种:  
 

代码示例:
1
2
3
4
5
$('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
 代码示例:

1
2
3
4
$('input').attr("disabled","disabled")//将input元素设置为disabled 
$('input').removeAttr("disabled");//去除input元素的disabled属性 
    
if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

  

对于为元素设置disabled属性和取消disabled属性的方法还有如下两种:  
 

代码示例:
1
2
3
4
5
$('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;};  
  
方式二:  
 

代码示例:
1
2
3
4
5
6
7
8
9
10
11
<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了。


本文标题:jquery设置元素readonly和disabled(checkbox只读)
本文链接:https://vtzw.com/post/947.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。