Question

所有

我正在尝试动态生成彼此关联的复选框和文本框列表。

在客户端，我想在选中相应的复选框时动态启用文本框。

生成复选框和文本框的C＃代码

foreach (DataRow row in AccountsDS.Tables["Table"].Rows)
{
  CheckBox c1 = new CheckBox();
  c1.ID = "chk" + row["Num"];
  c1.Text = row["Num"].ToString();
  c1.CssClass = "AccountSelectBox";
  c1.ClientIDMode = System.Web.UI.ClientIDMode.Static;

  TextBox t1 = new TextBox();
  t1.ID = "txt" + row["Num"];
  t1.CssClass = "AccountAmountBox";
  t1.Enabled = false;
  t1.Width = new Unit("50px");
  t1.ClientIDMode = System.Web.UI.ClientIDMode.Static;

  TableRow tr = new TableRow();
  TableCell tc1 = new TableCell();
  TableCell tc2 = new TableCell();
  TableCell tc3 = new TableCell();
  TableCell tc4 = new TableCell();
  TableCell tc5 = new TableCell();


  tc1.Controls.Add(c1);
  tc2.Controls.Add(t1);
  tc3.Text = row["Num"].ToString();
  tc4.Text = row["Num1"].ToString();
  tc5.Text = row["Num2"].ToString();

  tr.Cells.Add(tc1);
  tr.Cells.Add(tc3);
  tr.Cells.Add(tc4);
  tr.Cells.Add(tc5);
  tr.Cells.Add(tc2);

  AccountsTable.Rows.Add(tr);
}

启用文本框的客户端脚本

$(document).ready(function () {

            $(".AccountSelectBox").change(function () {
                var index = 0;
                $(".AccountSelectBox").each(function () {
                    alert($(this).attr('checked'));
                });
            });
        });

检查总是给我“假”。这是正确的方法吗？我正在尝试查找所有选中的字段并使用其ID来启用具有相同ID的文本框。（两者都有不同的前缀使它们独一无二）

有更好（或更简单）的方法吗？

修改

使用$（this）.attr（'id'）也给我'undefined'。并尝试$（this）.val提供了一个HTML的长文本，似乎完全不相关。

动态生成HTML

<table id="ContentPlaceHolder1_AccountsTable" style="width:100%;margin-top:20px; text-align:center;">
        <tr>
            <td><span class="AccountSelectBox"><input id="chk7617537" type="checkbox" name="ctl00$ContentPlaceHolder1$chk7617537" /><label for="chk7617537">7617537</label></span></td><td>7617537</td><td>03/22/2014</td><td></td><td><input name="ctl00$ContentPlaceHolder1$txt7617537" type="text" id="txt7617537" disabled="disabled" class="aspNetDisabled AccountAmountBox" style="width:50px;" /></td>
        </tr><tr>
            <td><span class="AccountSelectBox"><input id="chk7685249" type="checkbox" name="ctl00$ContentPlaceHolder1$chk7685249" /><label for="chk7685249">7685249</label></span></td><td>7685249</td><td>04/23/2014</td><td></td><td><input name="ctl00$ContentPlaceHolder1$txt7685249" type="text" id="txt7685249" disabled="disabled" class="aspNetDisabled AccountAmountBox" style="width:50px;" /></td>
        </tr><tr>
            <td><span class="AccountSelectBox"><input id="chk27979714" type="checkbox" name="ctl00$ContentPlaceHolder1$chk27979714" /><label for="chk27979714">27979714</label></span></td><td>27979714</td><td>04/18/2014</td><td></td><td><input name="ctl00$ContentPlaceHolder1$txt27979714" type="text" id="txt27979714" disabled="disabled" class="aspNetDisabled AccountAmountBox" style="width:50px;" /></td>
        </tr><tr>
            <td><span class="AccountSelectBox"><input id="chk7701997" type="checkbox" name="ctl00$ContentPlaceHolder1$chk7701997" /><label for="chk7701997">7701997</label></span></td><td>7701997</td><td>05/07/2014</td><td></td><td><input name="ctl00$ContentPlaceHolder1$txt7701997" type="text" id="txt7701997" disabled="disabled" class="aspNetDisabled AccountAmountBox" style="width:50px;" /></td>
        </tr><tr>
            <td><span class="AccountSelectBox"><input id="chk28183452" type="checkbox" name="ctl00$ContentPlaceHolder1$chk28183452" /><label for="chk28183452">28183452</label></span></td><td>28183452</td><td>05/07/2014</td><td></td><td><input name="ctl00$ContentPlaceHolder1$txt28183452" type="text" id="txt28183452" disabled="disabled" class="aspNetDisabled AccountAmountBox" style="width:50px;" /></td>
        </tr>
    </table>

这是我使用$(this).val

时得到的结果

enter image description here

编辑从文本框中读取

尝试

$(".AccountAmountBox :input").blur(function () {
                alert($(this).text);
            });

$(".AccountAmountBox").blur(function () {
                alert($(this).val);
            });

Answer 1

当前复选框状态由以下方式返回：

var currentlyChecked = $( elem ).prop( "checked" )

初始复选框状态（永不改变）由以下方式返回：

var initiallyChecked = ($( elem ).attr( "checked" ) == "checked")

有关详情，请查看here。特别感兴趣的是：

根据W3C表单规范，checked属性是一个布尔属性，这意味着如果属性完全存在则相应的属性为true - 例如，即使属性没有值或设置为空字符串价值甚至＆＃34;假＆＃34;。所有布尔属性都是如此。

尽管如此，要记住关于checked属性的最重要的概念是它与checked属性不对应。该属性实际上对应于defaultChecked属性，应仅用于设置复选框的初始值。 checked属性值不会随复选框的状态而改变，而checked属性则会改变。因此，确定是否选中复选框的跨浏览器兼容方式是使用属性：
if ( elem.checked )

if ( $( elem ).prop( "checked" ) )

if ( $( elem ).is( ":checked" ) )

Answer 2

AccountSelectBox 是您编写此选择器所需的范围类：

$(".AccountSelectBox input:checkbox").change(function () {
                alert(this.checked);
            });

更新后的代码：

//enable/disable textbox of row on checkbox checked and unchecked

$(".AccountSelectBox input:checkbox").change(function () {
    if (this.checked) 
       $(this).closest("tr").find('.AccountAmountBox').removeAttr("disabled");
    else 
       $(this).closest("tr").find('.AccountAmountBox').prop("disabled", true);

});

//reads value when user leaves textbox

$('.AccountAmountBox').blur(function () {

    alert($(this).val())

})

FIDDLE DEMO

jQuery - 基于复选框启用文本框 - 动态生成

2 个答案: