Amit
Amit

Reputation: 1184

Enabling disabled CheckBoxList in javascript - checked items not recognized after postback

I have a CheckBoxList which can load as disabled, but might need to become enabled after some client side actions.

I am able to enable the checkboxes using jQuery, but the problem is that after submitting the page, the selected items in the ChceckBoxList are not recognized (probably because the control is not in the ViewState).

A simple example for the scenario:

<asp:CheckBoxList ID="chkList1" runat="server" Enabled="false" ClientIDMode="Static">
       <asp:ListItem Value="123" />
       <asp:ListItem Value="456" />
       <asp:ListItem Value="789" />
</asp:CheckBoxList>

$(document).ready(function()
{
    $("#divEnable").click(function()
    {
        var inputs = $("#chkList1").find("input");
        for (var i = 0; i < inputs.length; i++)
        {
            inputs[i].disabled = false;
        }
    });
}

And then after enabling the checkboxes, selecting them and sending a postback - no selected items are recognized.

I tried disabling the items "manually", as in

chkList1.Items[0].Attributes.Add("disabled", "disabled");

But that did not work (the disabled attribute was attached to the containing span instead of the input control).

I also considered using hidden fields to keep track of the checkbox selections, but since I have multiple CheckBoxLists in a grid, that would be very inelegant.

Is there any way around this?

Upvotes: 0

Views: 3771

Answers (3)

user2207612
user2207612

Reputation: 3

I had the same issue. The way I fixed this was to enable the checkboxlist to start, then on load of the page, disable using script. That way the controls got into the viewstate, but were still disabled to start.

    var checkBoxListToChange = document.getElementById('');
    var checkboxes = checkBoxListToChange.getElementsByTagName("input");
    for (var x = 0; x < checkboxes.length; x++) {
        checkboxes[x].disabled = true;
    }

Upvotes: 0

mehmood
mehmood

Reputation: 2600

You can use this

  for (i = 0; i < document.forms[0].length; i++)
   {
      e = document.forms[0].elements[i];
      if (e.id.indexOf("chklist") != -1)
      {
           e.disabled = false;
      }
  }

Upvotes: 0

Niranjan Singh
Niranjan Singh

Reputation: 18290

try this:

$(document).ready(function()
{
    $("#divEnable").click(function()
    {
        var inputs = $("#chkList1").find("input")
            .each(function(){
                            //if($(this).is(":disabled"))
                            //{
                               $(this).prop("disabled",true);
                            //}
                          });      
});

Ref:
jQuery asp control .prop(“disabled”, “”) not enabling check box in IE 9
Unable to handle disable check box

Upvotes: 1

Related Questions