功能描述
前端頁面中，有時需要頁面某些元素，或者整個頁面只讀顯示，如果用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> |