Enable checkboxlist not working in IE, asp.net, jquery

Question

<asp:CheckBoxList ID="chkList" runat="server" Enabled="false" >
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:CheckBoxList>

<asp:Button ID="btnFoo" runat="server" Text="Test" />

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#<% = btnFoo.ClientID %>').click(function () {
            //var targetValue = 2;
            var items = $('#<% = chkList.ClientID %> input:checkbox');
            for (var i = 0; i < items.length; i++) {
                //alert(i);
                //if (items[i].value == targetValue) {
                    items[i].checked = true;
                    // break;
                //}
            }

            $('#<%= chkList.ClientID%>input:checkbox').removeAttr('disabled');                                                    return false;
        })
    });
</script>

Note: it works in Chrome, FF not in IE

Its not wroking in IE8, here is the below code. Its checking all checkboxes, but keeps them Disabled, any solution please?

Whats the source of the rendered page look like? Specifically, the list of the checkboxes? — tymeJV
– tymeJV, Commented Apr 5, 2013 at 18:12
<table id="ctl00_cphMain_chkList" disabled="disabled" border="0"> <tr> <td> <span disabled="disabled"> <input id="ctl00_cphMain_chkList_0" type="checkbox" name="ctl00$cphMain$chkList$0" disabled="disabled" /> <label for="ctl00_cphMain_chkList_0">1</label> </span> </td> </tr><tr> <td><span disabled="disabled"><input id="ctl00_cphMain_chkList_1" type="checkbox" name="ctl00$cphMain$chkList$1" disabled="disabled" /><label for="ctl00_cphMain_chkList_1">2</label></span></td> </tr> </table> — Avinash
– Avinash, Commented Apr 5, 2013 at 18:21

Hanlet Escaño · Accepted Answer · 2013-04-05 18:49:33Z

1

Try using the prop property instead of .checked:

$("#btn").on("click",function(){
    $('input:checkbox').each(function(){
     $(this).prop("checked", "true");
    });
});

jsFiddle: http://jsfiddle.net/hxS7M/1/

Edit: This will also make them enabled.

$("#btn").on("click",function(){
    $('input:checkbox').each(function(){
     $(this).prop("checked", "true").prop("disabled",false);
    });
});

jsFiddle: http://jsfiddle.net/hxS7M/4/

edited Apr 5, 2013 at 18:49

answered Apr 5, 2013 at 18:21

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

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

1 Comment

Avinash Over a year ago

Sorry, please see my question again: Its checking all checkboxes, but keeps them Disabled, any solution please?

Win · Accepted Answer · 2013-04-05 20:19:35Z

Everybody's script is working for normal HTML page. However, you are using button control and it posts back to server unless you explicitly cancel the event.

checkAll returns false to onclick event, so that it won't post back to server.

enter image description here

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="WebForm7.aspx.cs" Inherits="WebApplication2010.WebForm7" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="chkList" runat="server" Enabled="False">
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
        </asp:CheckBoxList>
        <asp:Button ID="btnFoo" runat="server" Text="Test" 
            OnClientClick="return checkAll();" />
        <script type="text/javascript" language="javascript">
            function checkAll() {
                $('#<% = chkList.ClientID %> :checkbox').each(function () {
                    $(this).prop("checked", "true").prop("disabled",false);
                });
                return false;
            }
        </script>
    </div>
    </form>
</body>
</html>

Credit to @Hanlet Escaño.

Fals · Accepted Answer · 2013-04-05 18:29:28Z

0

Try this:

$(document).ready(function () { $('#btnFoo').click(function () { $('#chkList input:checkbox').each(function(i,e) { $(e).attr("checked", true); }) }); })

answered Apr 5, 2013 at 18:29

Fals

6,8394 gold badges26 silver badges46 bronze badges

2 Comments

tymeJV Over a year ago

Should change attr() to prop()

Avinash Over a year ago

please check my question: Its checking all checkboxes, but keeps them Disabled, any solution please?

tymeJV · Accepted Answer · 2013-04-05 18:42:06Z

0

To enable them, do this

$('#<%= chkList.ClientID%>input:checkbox').prop('disabled', false);

answered Apr 5, 2013 at 18:42

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Collectives™ on Stack Overflow

Enable checkboxlist not working in IE, asp.net, jquery

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related