代码如下:
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>