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

来源：互联网发布：网络科科是什么意思编辑：程序博客网时间：2024/06/05 14:17

功能描述

前端页面中，有时需要页面某些元素，或者整个页面只读显示，如果用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 0