码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 设置checkbox select radio 为“只读”

时间:2014-07-02 18:19:11      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   使用   strong   

 

JQuery  设置checkbox select radio 为“只读”,通过测试知道使用HTML标签的 text 和 textarea 、button 可以设置readonly="readonly"属性。

但是checkbox 、select、 radio 这三个控件使用起来不能使用readonly="readonly"属性,只有 disabled="disabled"可以使用。

这样就出现问题了。又想不让修改,又想在后台获取值。如果使用disabled属性,但是发现(string value = Request.Form["XX"];)值为空。

不想修改后台代码,最后在和博哥的讨论之下,终于想出了下面的方法。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  8.     <script type="text/javascript">  
  9.         function setSCR_ReadOnly() {  
  10.             var items = $("input[type=‘checkbox‘]")  
  11.             var html = ""  
  12.             for (var i = 0; i items.length; i++) {  
  13.                 items[i].disabled = true;  
  14.                 html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";  
  15.             }  
  16.   
  17.             var items = $("select");  
  18.             for (var i = 0; i items.length; i++) {  
  19.                 html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";  
  20.                 items[i].disabled = true;  
  21.             }  
  22.   
  23.             var items = $(":radio");  
  24.             for (var i = 0; i items.length; i++) {  
  25.                 html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";  
  26.                 items[i].disabled = true;  
  27.             }  
  28.             $("#divhtml").html(html);  
  29.   
  30.   
  31.         }  
  32.     </script>  
  33. </head>  
  34. <body>  
  35.     <form id="form1" runat="server">  
  36.     <div>  
  37.         <input type="text" readonly="readonly" />  
  38.         <input  type="button" value="不可用" onclick="setSCR_ReadOnly()" />  
  39.         <input  type="checkbox" id="r" checked="checked" runat="server" value="cboVAlue" />  
  40.         <select  id="sel" name="sel">  
  41.             <option value="请选择">请选择</option>  
  42.             <option value="1">1</option>  
  43.         </select>  
  44.         <select id="Select1" name="Select1">  
  45.             <option value="请选择">请选择</option>  
  46.             <option value="1" selected="selected">1</option>  
  47.         </select>  
  48.         <input  id="rdo" name="rdo" type="radio" value="1" checked="checked" />  
  49.         <asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />  
  50.         <div style="display: none" id="divhtml">  
  51.         </div>  
  52.     </div>  
  53.     </form>  
  54. </body>  
  55. </html>  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function setSCR_ReadOnly() {
            var items = $("input[type=‘checkbox‘]")
            var html = ""
            for (var i = 0; i < items.length; i++) {
                items[i].disabled = true;
                html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";
            }

            var items = $("select");
            for (var i = 0; i < items.length; i++) {
                html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";
                items[i].disabled = true;
            }

            var items = $(":radio");
            for (var i = 0; i < items.length; i++) {
                html += "<input type=‘text‘ name=‘" + items[i].id + "‘ value=‘" + items[i].value + "‘>";
                items[i].disabled = true;
            }
            $("#divhtml").html(html);


        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" readonly="readonly" />
        <input  type="button" value="不可用" onclick="setSCR_ReadOnly()" />
        <input  type="checkbox" id="r" checked="checked" runat="server" value="cboVAlue" />
        <select  id="sel" name="sel">
            <option value="请选择">请选择</option>
            <option value="1">1</option>
        </select>
        <select id="Select1" name="Select1">
            <option value="请选择">请选择</option>
            <option value="1" selected="selected">1</option>
        </select>
        <input  id="rdo" name="rdo" type="radio" value="1" checked="checked" />
        <asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
        <div style="display: none" id="divhtml">
        </div>
    </div>
    </form>
</body>
</html>
将这些控件设置为disabled以后,发现这些控件就可以获取值。
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.          
  13.     }  
  14.     protected void Unnamed1_Click(object sender, EventArgs e)  
  15.     {  
  16.         string value = Request.Form["r"];  
  17.         string q = Request.Form["sel"];  
  18.         string s = Request.Form["Select1"];  
  19.         string w = Request.Form["rdo"];  
  20.     }  
  21. }  

JQuery 设置checkbox select radio 为“只读”,布布扣,bubuko.com

JQuery 设置checkbox select radio 为“只读”

标签:style   blog   http   java   使用   strong   

原文地址:http://www.cnblogs.com/mxyhws/p/3819860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!