根據條件決定是否為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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM