Checkbox not showing as checked on UserProfile (even with checked="checked")

Question

I have a dynamic list of checkboxes that are showing on a user profile in the admin area (user-edit.php). A user should be able to select the checkboxes which will save their selections as an array in a usermeta field. Easy enough. However when I load the user profile after Updating the User, the boxes are not checked even though the options were saved in the usermeta field and the checkbox has a property of checked="checked".

At first I was just using a basic in_array() to check if the checkbox value was in the array from the usermeta. If it was then I set checked="checked". This worked and showed in dev tools as showing checked="checked", however there was still no checkmark. Here's what that looked like:

$courseResults = DwgFunctions::get_all_courses();
        $userWaivedModules = DwgFunctions::checkCourses('scorm_waived_courses',$user);
            foreach($courseResults as $course){
                $courseListing.= '<input type="checkbox" name="waivedCourses[]" value="'.$course->getCourseId().'" '.(in_array($course->getCourseId(),$userWaivedModules)?"checked=\"checked\"":"").'/>'.$course->getTitle().'<br />';
            }

After doing some reading I discovered that WordPress likes to make us use the checked() function. Of course it just checks strings and I needed it to check against an array. So I used a handy function I found on the forums and now have this:

    $courseResults = DwgFunctions::get_all_courses();
    $userWaivedModules = DwgFunctions::checkCourses('scorm_waived_courses',$user);
        foreach($courseResults as $course){
            $courseListing.= '<input type="checkbox" name="waivedCourses[]" value="'.$course->getCourseId().'" '.DwgFunctions::dwg_checked($userWaivedModules,$course->getCourseId()).'/>'.$course->getTitle().'<br />';
        }

And my deg_checked function looks like this:

  function dwg_checked($haystack, $current){
            if(is_array($haystack) && in_array($current, $haystack)) {
                $current = $haystack = 1;
            }
        return  checked($haystack, $current);
        }

Both ways the result is the same:

<input type="checkbox" name="waivedCourses[]" value="1-555e1f4f86bd2">SC DDSN Family-Arranged Respite - An Overview for Families<br>
<input type="checkbox" name="waivedCourses[]" value="1-555e1f89ae931" checked="checked">Overview for Families - Quiz<br>
<input type="checkbox" name="waivedCourses[]" value="1-555e1f9d1d688" checked="checked">Overview for Families - Quiz<br>
<input type="checkbox" name="waivedCourses[]" value="1-555e20e3079ad" checked="checked">Overview for Families - Quiz<br>
<input type="checkbox" name="waivedCourses[]" value="FamilyModule_FinalQuizc0ea0981-8158-4077-b94a-6d182db566a3">FamilyModule_FinalQuiz<br>
<input type="checkbox" name="waivedCourses[]" value="FAMILYMODULE_QUIZ3ecc3d81-1281-4477-adb8-ac81ef96724a">FAMILYMODULE_QUIZ<br>
<input type="checkbox" name="waivedCourses[]" value="FamilyModule_TheFinalQuizad828150-f6da-4e19-b69c-5a78a74d412a">FamilyModule_FinalQuiz_2<br>

However it shows on the screen as:

If I update the user as is (with some boxes showing checked="checked" however none actually showing a checkmark), it will clear my usermeta value completely.

If I actually check the checkbox it will show the checkmark and also implement the css for input[type=checkbox]:checked:before , and will save the setting in the usermeta. Notice though that the css before pseudoclass is not implemented when the checked attribute is dynamically added.

input[type=checkbox]:checked:before {
    content: '\f147';
    margin: -3px 0 0 -4px;
    color: #1e8cbe;
}

Any ideas what could be going on? Other places I have checkboxes that are working fine, however those are not using arrays (nor are they using the checked() function)

Answer 1

I guess the user-edit screen like tables only. Other check boxes I have are using the the standard table structure. So instead of just using input checkboxes, I'm inserting the check box in the element and the label in the element to follow the structure of the rest of the page. So now my code looks like this:

$courseResults = DwgFunctions::get_all_courses();
        $userWaivedModules = DwgFunctions::checkCourses('scorm_waived_courses',$user);
            foreach($courseResults as $course){
                $courseListing.= '<tr class="waived-modules"><th><input type="checkbox" name="waivedCourses[]" value="'.$course->getCourseId().'" '.DwgFunctions::dwg_checked($userWaivedModules,$course->getCourseId()).'/></th>';
                $courseListing.= '<td><label for="waivedCourses">'.$course->getTitle().'</label></td></tr>';
            }

This results in this:

Still not 100% sure why this works and the other doesn't, but as long as it now works.

Answer 2

I know this is an old post but I stumbled upon your question while searching for the same issue. Thought I will just share my two cents so that people searching for the same issue (in future) will save some time.

Well, the default solution seems that we are actually bound to use the checked() function by Wordpress in the Admin as stated by Checkboxes section of this article.

Anyhow, the basic idea is we can use the following syntax to pre-check a checkbox (in a checkbox input field) before rendering a page :

checked( $checkbox_value_from_db['array_of_meta_values'][0], 'yes' ) 

Hope this helps somebody.