前端页面设置只读属性组件

最新推荐文章于 2024-06-04 14:11:26 发布

云焰

最新推荐文章于 2024-06-04 14:11:26 发布

阅读量2.6k

点赞数

分类专栏：功能组件 Web开发

本文链接：https://blog.csdn.net/yan_dk/article/details/18841291

版权

Web开发同时被 2 个专栏收录

65 篇文章 2 订阅

订阅专栏

功能组件

63 篇文章 1 订阅

订阅专栏

功能描述

前端页面中，有时需要页面某些元素，或者整个页面只读显示，如果用js代码逐个来实现，代码量非常多，我们可以用通用的代码来解决。

组件介绍

1.引入jquery组件

2.只读方法的js代码如下：

//设置页面中相应标记参数下的所有控件（如input、text、select等）为只读
function setReadOnlyAll(domid){
var domElements = $("#"+domid);
//日历控件
var WdateElements = domElements.find(".Wdate");
WdateElements.each(function(){
$(this).prop("disabled",true);
});
var inputElements = domElements.find("input[type='text']"); //alert(inputElements)
inputElements.each(function(){
$(this).prop("readOnly","readOnly");
});
var checkboxElements = domElements.find("input[type='checkbox']");
checkboxElements.each(function(){
$(this).prop("disabled",true);
});
var radioElements = domElements.find("input[type='radio']");
radioElements.each(function(){
$(this).prop("disabled",true);
});
var buttonElements = domElements.find("input[type='button']");
buttonElements.each(function(){
$(this).prop("disabled",true);
});
var areaElements = domElements.find("textarea");
areaElements.each(function(){
$(this).prop("disabled",true);
});
var selectElements = domElements.find("select");
selectElements.each(function(){
$(this).prop("disabled",true);
});
//禁用链接
var selectElements = domElements.find("a");
selectElements.each(function(){
$(this).unbind("click");
$(this).removeAttr("onclick");
$(this).click(function(event){
event.preventDefault();
return false;
});
});
}

调用范例

if(reqsource == "sp"||reqstate=='canceled'||reqstate=='madeorder'){
setReadOnlyAll("requireBaseInfo");
。。。
}

<html>
<div id="requireBaseInfo">
<s:form name="myform" id="myform" action="" method="post" theme="simple" enctype="multipart/form-data">
<input type="hidden" name="require.id" value="<s:property value='require.id'/>"/>
。。。
</div>
</html>

云焰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端页面设置只读属性组件

功能描述前端页面中，有时需要页面某些元素，或者整个页面只读显示，如果用js代码逐个来实现，代码量非常多，我们可以用通用的代码来解决。组件介绍1.引入jquery组件/plugins/jquery/jquery-1.7.2.min.js">2.只读方法的js代码如下：//设置页面中相应标记参数下的所有控
复制链接

扫一扫