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

秒速五厘米 2022-08-24 14:08 325阅读 0赞

## 功能描述 ##

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

## 组件介绍 ##

1.引入jquery组件

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript" src="&lt;%=path%&gt;/plugins/jquery/jquery-1.7.2.min.js"&gt;&lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

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

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

## 调用范例 ##

<table> 
 <tbody> 
 <tr> 
 <td>if(reqsource == "sp"||reqstate=='canceled'||reqstate=='madeorder'){ &nbsp;setReadOnlyAll("requireBaseInfo"); &nbsp; 。。。 }&nbsp; &lt;html&gt; &lt;div &nbsp;id="requireBaseInfo"&gt; &nbsp;&lt;s:form name="myform" id="myform" action="" method="post" theme="simple" enctype="multipart/form-data"&gt; &nbsp; &nbsp;&lt;input type="hidden" name="require.id" &nbsp;value="&lt;s:property value='require.id'/&gt;"/&gt; 。。。 &lt;/div&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>