CODEWITHSUNDEEP
javascriptc#jqueryasp.net
Kamran
Kamran

Reputation: 4100

Asp.net enable/disable checkboxList with jQuery

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. enter image description here

Upvotes: 1

Views: 4672

Answers (4)

Liquid
Liquid

Reputation: 648

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/

Upvotes: 2

Avinash Hsaniva Penumallu
Avinash Hsaniva Penumallu

Reputation: 1

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

Upvotes: 0

tichra
tichra

Reputation: 553

Something like this should work:

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

Upvotes: 0

Bubavanhalen
Bubavanhalen

Reputation: 148

Try something like this:

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

Update:

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

Upvotes: 2

Related Questions