JQuery - Включить Textbox на основе Флажки - Динамически генерируемый

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 для включения текстовых полей с тем же идентификатором. (оба имеют разные префикс, что делает их уникальными)

Есть ли лучший (или более простой) способ сделать это?

EDIT:

с помощью $ (это) .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

EDIT Чтение из текстового поля

Попробованная

$(".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

Answer 2

Флажок состояние ток возвращается:

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

The исходное состояние CheckBox (который никогда не меняется) возвращается:

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

Для получения дополнительной информации посетите here. Особый интерес:

Согласно спецификации W3C формы, проверяемый атрибут является логическим атрибут, который означает, что соответствующее свойство истинно, если атрибут присутствует на всех, даже если, например, атрибут не имеет значение или устанавливается на пустое значение строки или даже «false». Это относится ко всем логическим атрибутам.

Тем не менее, самая важная концепция, которую нужно запомнить об отмеченном атрибуте, заключается в том, что она не соответствует проверяемому свойству. Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения этого флажка. Проверенное значение атрибута не изменяется с состоянием этого флажка, а свойство checked.Таким образом, кросс-браузер, совместимый способ определить, если установлен флажок, чтобы использовать свойство:

if (elem.checked) 

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

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