JQuery 设置checkbox select radio 为“只读”

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

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

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

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

[html] view plaincopyprint?

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

  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. public partial class _Default : System.Web.UI.Page
  8. {
  9. protected void Page_Load(object sender, EventArgs e)
  10. {
  11. }
  12. protected void Unnamed1_Click(object sender, EventArgs e)
  13. {
  14. string value = Request.Form["r"];
  15. string q = Request.Form["sel"];
  16. string s = Request.Form["Select1"];
  17. string w = Request.Form["rdo"];
  18. }
  19. }

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

时间： 2024-08-05 19:27:43

JQuery 设置checkbox select radio 为“只读”的相关文章

jQuery设置checkbox全选（区别jQuery版本）

jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery版本不同而已. jQuery很多版本都会对一些小的功能做一些改进,比如checkbox的选中. jQuery对checkbox改动的界线版本 jquery1.9.1. jquery1.9.1之前,全选是这样的: $('#checkbox').attr('checked',true) $('#chec

JQuery设置checkbox选中或取消等相关操作

$("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']").removeAttr("checked");//取消全选 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 //获取选择的值 var str=""; $

jquery 设置checkbox的checked属性 总是出问题

所使用的jquery版本为jquery-1.9.1,浏览器为Chrome 1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase <input type="checkbox" id="selectAll" onclick="checkAll()">全选 function checkAll() {   var checkedOfAll=$("#selectAll

jquery 设置checkbox选中 和获取选中值

经常用到经常网上搜,这次写下来. 1,设置选中: $('#nrowid').prop('checked', false); 2,取选中项的值: $('#nrowid').prop("checked") || false; jquery 设置checkbox选中 和获取选中值

jquery设置checkbox状态，设置dropdownlist选中值，隐藏某控件，给某控件追加东西

jquery设置checkbox状态 $("[ID$=chkType]").attr("checked", true); jquery设置dropdownlist选中值 $("[ID$=ddlSTATUS]").val("Not Submitted"); jquery隐藏某控件 $("[ID$=MEMO]").parent().parent().hide(); jquery给某控件追加Label $(&qu

高版本jQuery设置checkbox状态注意事项

jQuery 1.9 以后, 使用 .attr(“checked”, true) 或  attr(“checked”, “checked”) 将无法正确设置 checkbox的状态, 同样的, 使用 .attr(“checked”) 也无法正确获取checkbox的状态 请从看到这篇文章开始, 使用 .prop(“checked”, true) 和 .prop(“checkbox”) 来设置和获取checkbox的勾选状态, 处于历史的考虑, 您可能更习惯使用 .is(“:checked”) 来

关于JQuery设置checkbox checked 的问题

近日做一个关于JQuery表单验证,有一个比较奇葩的要求,即checkbox是为必填项,textbox不是必填的. 而checkbox与textbox又是相关的,填写了textbox,则其上方的checkbox即相当于勾选.在使用中,用户很容易只注意到textbox,忽视checkbox,而不勾选,造成验证不通过. 所以想通过程序,在验证之前先判断textbox是否有值,如果有值,则自动勾选checkbox,再进行验证. 最初的代码如下: if ($("#ZYAreaBC").val(

jQuery判断checkbox，radio是否选中

兄弟文章: http://blog.csdn.net/libin_1/article/details/50734967 方法一: if ($("#checkbox-id").get(0).checked) { // do something } 方法二: if($('#checkbox-id').is(':checked')) { // do something } 方法三: if ($('#checkbox-id').attr('checked')) { // do somethin

jquery设置select选中的文本

<select id="prov">  <option value="1">北京市</option>  <option value="2">上海市</option>  <option value="3">天津市</option> </select> 用jquery设置上面select选中的文本 //第一种方式 var count =