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

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') 也会给我“未定义”。尝试 $(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 时得到的结果

编辑从文本框读取

已尝试

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

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

Answer 1

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