您的位置：首页 > 其它

根据条件决定是否为input设置只读属性

2017-11-09 10:34 330 查看

代码如下：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航