jQuery - Enable Textbox based on Checkboxes - Dynamically Generated

Question

All,

I am trying to dynamically generate a list of checkboxes and textboxes associated with each other.

On the client side I want to dynamically enable the text boxes when the corresponding checkbox is selected.

C# code to generate the checkboxes and text boxes

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);
}

Client Side script to enable textboxes

$(document).ready(function () {

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

The checked always gives me "false". Is this the right way to do it? I am trying to look for all the checked fields and use their ID to enable textboxes with the same ID. (both have different prefix making them unique)

Is there a better (or simpler) way to do this?

EDIT:

using $(this).attr('id') also gives me 'undefined'. And trying $(this).val gives a long text of HTML which seems completely irrelevant.

Dynamically Generated 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 is what I get when I use $(this).val

enter image description here

EDIT Reading from textbox

Tried

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

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

The HTML is just a simple empty ASP Table <asp:Table ID="AccountsTable" runat="server" style="margin-top:20px; text-align:center;" > </asp:Table> — Ron
– Ron, Commented Jul 8, 2014 at 14:52

Ehsan Sajjad · Accepted Answer · 2014-07-08 15:25:04Z

1

AccountSelectBox is the class of span you need to write this selector:

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

UPDATED CODE:

//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

edited Jul 8, 2014 at 15:25

answered Jul 8, 2014 at 15:04

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ron Over a year ago

Thanks, That worked. Just out of curiosity, are checkboxes like this always rendered in a span ?

Ehsan Sajjad Over a year ago

the webform render engine do this what i see

Ron Over a year ago

I want to get the text of the text box but it again doesnt seem to work. Can you please look at the edit and help ?

Ehsan Sajjad Over a year ago

you want corresponding textbox text when it is checked?

Ehsan Sajjad Over a year ago

you should refer for documentation to jquery website before using any method

|

John Wu · Accepted Answer · 2014-07-08 14:43:38Z

1

The current checkbox state is returned by:

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

The initial checkbox state (which never changes) is returned by:

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

For more information check here. Of special interest:

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:
if ( elem.checked )

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

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

answered Jul 8, 2014 at 14:43

John Wu

52.5k8 gold badges50 silver badges92 bronze badges

2 Comments

Ron Over a year ago

I updated my jQuery to alert($(this).prop('checked')); but it still gives me undefined. I also tried is(':checked') still false

Ron Over a year ago

I am not sure if this helps, but using $(this).attr('id') also gives me 'undefined'. And trying $(this).val gives a long text of HTML which seems completely irrelevant.

Collectives™ on Stack Overflow

jQuery - Enable Textbox based on Checkboxes - Dynamically Generated

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related