功能描述
前端页面中,有时需要页面某些元素,或者整个页面只读显示,如果用js代码逐个来实现,代码量非常多,我们可以用通用的代码来解决。
组件介绍
1.引入jquery组件
<script type="text/javascript" src="<%=path%>/plugins/jquery/jquery-1.7.2.min.js"></script> |
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> |