Asp.net enable/disable checkboxList with jQuery

Question

I have this kind of structure:

Radio Buttons:

o Enable o Disable

Check Boxes

[]checkBox1

[]checkBox2

[]checkBox3

[]checkBox4

The Above controls are generated dynamically.

<asp:RadioButtonList runat="server" ID="rbSubsidiaries" onclick = "Radio_Click()"/>

 <asp:CheckBoxList runat="server" ID="cblSubsidiaries" Enabled="False"/>

What I want is: When the user click on the RadioButton Enable All the checkboxes get enable otherwise disable.

I am at the point where I can see that if the user has clicked on enable radio button.

 function Radio_Click() {
 if ($('#<%=rbSubsidiaries.ClientID %> input:checked').val() == 'enable') {
            alert('enable is clicked');
}
}

But I don't know how to enable all the checkBoxes.

Picture that Contains the the rendered structure of the CheckBoxList. First Two check Boxes.

Bubavanhalen · Accepted Answer · 2015-09-25 09:39:26Z

2

Try something like this:

$("#cblSubsidiaries > input[type='checkbox']").prop("disabled", false)

Update:

$("#contentpage_0_content_0_cblSubsidiaries input[type=checkbox]").prop("disabled",false)

edited Sep 25, 2015 at 9:39

answered Sep 25, 2015 at 9:05

Bubavanhalen

1589 bronze badges

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

2 Comments

Bubavanhalen Over a year ago

Can you show the rendered structure of the CheckBoxList?

Kamran Over a year ago

Thanks @Bubavanhalen :)

Liquid · Accepted Answer · 2015-09-25 13:00:55Z

This is the code which will help you

Html

<input type="radio" name="check" value="enable" class="enableList">Enable
    <input type="radio" name="check" value="disable" class="disableList">Disable    

<div class="container">
 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
 <input type="checkbox" name="vehicle" value="Car">I have a car </div>

Script

$(document).ready(function () {           
        $('.enableList').change(function () {
            if ($(this).prop('checked') == true) {
                $('.container').find('input:checkbox').each(function () {
                    alert ("enable check box");
                });
            }
        });


        $('.disableList').change(function () {
            if ($(this).prop('checked') == true) {
                $('.container').find('input:checkbox').each(function () {
                    alert("disable check box");
                });
            }
        });

    });

this is working fidler https://jsfiddle.net/Ln7y6v0n/

perror · Accepted Answer · 2015-09-25 10:46:11Z

0

Something like this should work:

$('#contentpage_0_content_0_cblSubsidiaries input[type=checkbox]').each(function() {
      $(this).prop('checked', true);
 });

edited Sep 25, 2015 at 10:46

perror

7,51616 gold badges63 silver badges89 bronze badges

answered Sep 25, 2015 at 9:34

tichra

5636 silver badges18 bronze badges

Comments

Avinash Hsaniva Penumallu · Accepted Answer · 2015-09-25 11:39:56Z

 $(document).ready(function () {

            $('#<%=RadioButtonList1.ClientID%>').change(function () {
                 $('#<%=RadioButtonList1.ClientID%>').each(function () {
                     var checked = $(this).find('input:radio:checked');
                     if (checked.val() == "Enable") {

                         $('#<%=CheckBoxList1.ClientID%>').each(function () {
                             var checked = $(this).find('input:checkbox');
                             checked.prop('checked', true);
                         });
                     }
                     else {

                         $('#<%=CheckBoxList1.ClientID%>').each(function () {
                             var checked = $(this).find('input:checkbox');
                             checked.prop('checked', false);
                         });
                     }
                 });
             });
        });

 protected void Page_Load(object sender, EventArgs e)
        {
            ListItem item = new ListItem();
            item.Text = "Enable";
            item.Value = "Enable";
            RadioButtonList1.Items.Add(item);

            ListItem item1 = new ListItem();
            item1.Text = "Disable";
            item1.Value = "Disable";
            RadioButtonList1.Items.Add(item1);

            for (int i = 1; i <= 4; i++)
            {
                ListItem chkitem = new ListItem();
                chkitem.Text = "Checkbox" + i;
                chkitem.Value = "Checkbox" + i;
                CheckBoxList1.Items.Add(chkitem);
            }

        }

 <div>
            <asp:RadioButtonList ID="RadioButtonList1" runat="server"></asp:RadioButtonList>
            <br />
            <hr />
            <asp:CheckBoxList ID="CheckBoxList1" runat="server"></asp:CheckBoxList>
        </div>

Collectives™ on Stack Overflow

Asp.net enable/disable checkboxList with jQuery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related