Checkbox checked appears unchecked

Question

I am passing an Array to a function that is supposed to check/uncheck some checkbox within a jQuery dialog.

function preCheck(boolArray){
 $("#cb0").attr("checked", boolArray[0]);
 $("#cb1").attr("checked", boolArray[1]);
 $("#cb2").attr("checked", boolArray[2]);
 $("#cb3").attr("checked", boolArray[3]);
 //etc.
 $("#divform").dialog("open");
}

Those checkbox are placed in the divform which is delcared as dialog in the document.ready function. The value inside boolArray is defined by which button I click to open the dialog (resulting in different checkbox being checked depending on which button was clicked).

My issue is the following : the first time a button is clicked, the checkbox are checked accordingly to the boolArray. If I check/uncheck some manually > close the dialog > reclick on the same button to open the dialog, the checkbox remain in the state they were before I closed the dialog and no longer are checked/unchecked according to boolArray's value. Even more frustrating, the one that I unchecked and that should be checked (according to the boolean in boolArray) appear in the HTML as checked="checked" even though there are no tick marks. Any help would be appreciated, I'm truly lost.

Use jQuery __prop__ instead, see: http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery — Irvin Dominin, Jun 19 '14 at 12:39
@WizLiz - I added a demo below using .prop() It certainly works. Maybe you could post more of your code with the dialog and what not? — wrxsti, Jun 19 '14 at 12:44

score 1 · Accepted Answer · answered Jun 19 '14 at 12:39

You should be using .prop() instead of .attr().

From the jQuery documentation:

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

You're likely seeing that behavior: you've set the attribute and are changing its value; because it's boolean, its presence means that your checkboxes are checked.

Try this:

function preCheck(boolArray){
 $("#cb0").prop("checked", boolArray[0]);
 $("#cb1").prop("checked", boolArray[1]);
 $("#cb2").prop("checked", boolArray[2]);
 $("#cb3").prop("checked", boolArray[3]);
 //etc.
 $("#divform").dialog("open");
}

This was my first try, and it did not work. However I just realised that my browser cached my old javascript (using attr) and did not refresh it client side making me think that prop didn't work aswell. I've juste made a fresh restart and prop is working properly, thanks — WizLiz, Jun 19 '14 at 12:42

score 1 · Answer 2 · answered Jun 19 '14 at 12:41

Try .prop() instead. Here is a DEMO: http://jsfiddle.net/hxsRK/ This will continue to work even if you update your array.

function preCheck(boolArray){
 $("#cb0").prop("checked", boolArray[0]);
 $("#cb1").prop("checked", boolArray[1]);
 $("#cb2").prop("checked", boolArray[2]);
 $("#cb3").prop("checked", boolArray[3]);
}

var checks = [true, false, true, true, false];
$('button').click(function(){
    preCheck(checks);
});

Checkbox checked appears unchecked

2 Answers2