Javascript – Why does a checkbox remain checked in FF3 but not in IE, Chrome or

asp.netcheckboxjavascriptjquery

So – I have a checkbox

<asp:CheckBox ID="chkOrder" runat="server" Visible='<%#IsCheckBoxVisible() %>' 
     Checked="false"
     OnCheckedChanged="chkOrder_CheckedChanged" AutoPostBack="true" 
     EnableViewState="false"></asp:CheckBox>

the one above. Now, the checkbox is in a gridview and on databound – for all the rows in the gridview the checkbox is set to false. The problem is that the first checkbox is still true checked.

In IE the problem doesn't exist, same for Chrome. I'm running out of options.
Also if i use

$("checkboxName").attr("checked"); // verified on jquery ready function.

In FF it is true; IE false; Chrome false.

Any tips?

EDIT

Now get ready for this : in the generated html – there is NO checked attribute.
The diff between FF and IE is exactly the same.

Another thing – the grid that contains the checkboxes has an ajax panel on it and when I page the grid, try to go to page 2 – the checkedChanged in codebehind is triggered.

Best Answer

Firefox remembers the state of form fields by default. Ctrl+F5 will force Firefox to clear this cache.

You can disable this for individual form and input elements:

<form autocomplete="off"> 

<input ... autocomplete="off" />

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

Javascript – How to check whether a checkbox is checked in jQuery

How do I successfully query the checked property?

The checked property of a checkbox DOM element will give you the checked state of the element.

Given your existing code, you could therefore do this:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

However, there's a much prettier way to do this, using toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Best Answer

Related Solutions

Javascript – Setting “checked” for a checkbox with jQuery

Modern jQuery

DOM API

jQuery 1.5.x and below

Javascript – How to check whether a checkbox is checked in jQuery

Related Topic