码迷,mamicode.com
首页 > Web开发 > 详细

http://www.softwhy.com/forum.php?mod=viewthread&tid=9287

时间:2016-01-01 01:59:50      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

jQuery如何将表单元素设置为只读或者不可用:
在实际应用中有时候需要根据情况动态的将表单元素设置为只读或者不可用,这个问题当然非常的简单,本章节适合于初学者,对于有经验的朋友来说可以忽略不计,下面就通过代码实例简单介绍一下如何实现此功能。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>设置表单元素只读或者不可用-蚂蚁部落</title>
<style type="text/css">
li{list-style:none}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){
  $("#top").attr("readonly","readonly");
  $("#bottom").attr("disabled","disabled");
})
</script>  
</head> 
<body>
<ul>
  <li><input type="text" value="蚂蚁部落" id="top" /></li>
  <li><input type="text" value="蚂蚁部落" id="bottom" /></li>
</ul> 
</body> 
</html> 

以上代码可以将两个文本框分别设置为只读和不可用。不过实现此效果的方式并非只有这么一种,下面就做一下总结:
设置为只读或者不可用:
方式一:

$("#top").attr("readonly","readonly");
$("#bottom").attr("disabled","disabled");

方式二:

$("#top").attr("readonly",true);
$("#bottom").attr("disabled",true);

取消只读或者不可用:
方式一:

$("#top").attr("readonly",false);
$("#bottom").attr("disabled",false);

方式二:

$("#top").attr("readonly",false);
$("#bottom").attr("disabled",false);

判断是否被选中或者被设置为不可用:

$("#top").prop("readonly");
$("#bottom").prop("disabled");

建议使用prop()函数,具体可以参阅prop()方法和attr()方法的区别一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9287

更多内容可以参阅:http://www.softwhy.com/jquery/

http://www.softwhy.com/forum.php?mod=viewthread&tid=9287

标签:

原文地址:http://www.cnblogs.com/zhengzebiaodashi/p/5092882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!