JQuery 设置checkbox select radio 为“只读”

浏览数：19 / 时间：2015年06月09日

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

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

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

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

<%@ 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>

<%@ 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以后，发现这些控件就可以获取值。

[csharp] view plain copy print ?