根据条件决定是否为input设置只读属性
Posted 微笑的小小向日葵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据条件决定是否为input设置只读属性相关的知识，希望对你有一定的参考价值。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据条件决定是否为input设置只读属性（兼容ie8）</title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 7 </head> 8 <body> 9 <div class="jumbotron" style="background-color: #fff;"> 10 <form action="" method="post" class="form-horizontal"> 11 <div class="form-group form-group-sm"> 12 <label for="notice" class="col-sm-4 control-label">是否只读：</label> 13 <div class="col-sm-4"> 14 <select id="notice" name="notice" class="form-control"> 15 <option value="1">是</option> 16 <option value="0">否</option> 17 </select> 18 </div> 19 </div> 20 <div class="form-group form-group-sm"> 21 <label for="reqAddress" class="col-sm-4 control-label">显示input是否只读：</label> 22 <div class="col-sm-4"> 23 <input type="text" name="reqAddress" id="reqAddress" class="form-control" /> 24 </div> 25 </div> 26 </form> 27 </div> 28 <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 29 <script> 30 // 根据条件决定是否填写请求地址 31 var notice=$(‘#notice‘).val(); 32 $(‘#notice‘).change(function(){ 33 notice = $(‘#notice‘).val(); 34 switch (notice) { 35 case "1": 36 $(‘#reqAddress‘).prop(‘readonly‘,false); 37 // $(‘#reqAddress‘).readOnly=false; 此设置无效 38 break ; 39 case "0": 40 $(‘#reqAddress‘).prop(‘readonly‘,true); 41 // $(‘#reqAddress‘).readOnly=true; 此设置无效 42 break; 43 } 44 }) 45 </script> 46 </body> 47 </html>
以上是关于根据条件决定是否为input设置只读属性的主要内容，如果未能解决你的问题，请参考以下文章