JQuery Checkboxes do not change visual state at .prop("checked", true)

Question

I've tried everything I'm aware of trying to make this work, but I'm still not able to.

All I need is a "select all" checkbox, do a loop to every element to set their classes and save their id in a session variable. So far I get every part of this code, except to visually see the checkbox checked.

Here is my code:

$('#all').on('change', function () {
    if($(this).is(':checked')){
        table.$("input[type='checkbox']").each( function() {
            console.log($(this).attr("id"));
            $(this).prop( "checked" ,true);
            console.log($(this).prop("checked"));
            var id=$(this).attr("id").split('_')[1];
            var id_row=table.row("#row_"+id).index()+1;
            $("#tabla_equipos tr:nth-child(" + id_row + ")").addClass('active');
            $("table.DTFC_Cloned>tbody tr:nth-child(" + id_row + ")").addClass('active');
            funcChechboxes('{{ path('user_session_set')}}',id,'single');
        });
    }else{
        //more code
    }
});

I do get the checkboxes id on the console, and the "true" value for their "checked" prop ... even the class is applied, but not the pretty tick in the box.

console:

e_1
true
e_2
true
e_3
true
e_5
true

Any help would be much appreciated!

Regards.

At least you can use `$(this).prop("checked", true).trigger('change');` — Regent, Nov 24 '14 at 05:18
make sure you have jquery version greater than 1.6 as prop introduced in those versions . http://api.jquery.com/prop/#prop-propertyName-value — Vishal Sharma, Nov 24 '14 at 05:23
This looks like an error -> `table.$("input[type='checkbox']")`, what is `table` ? — adeneo, Nov 24 '14 at 05:27
the line table.$("input[type='checkbox']") should be changed to $("tableid").find("input[type='checkbox']").each(... — Telmo Silva, Nov 24 '14 at 08:44
@TelmoSilva I will try what you are suggesting, BUT why everything else is working? why I can set their classes and get their id without a problem? also, if I ask for their checked prop I get the true value, without the tick :/ — Mario Salgado, Nov 24 '14 at 12:29
@adeneo , he is able to console it out , so i don't think selecting checkboxes would be a problem ! — Vishal Sharma, Nov 24 '14 at 13:09
@MarioSalgado , do you have checkboxes with id e_1,e_2 and so , or something else ? — Vishal Sharma, Nov 24 '14 at 13:11
@vishalsharma I only use ids for checkboxes and the main table that has them. `` — Mario Salgado, Nov 24 '14 at 15:06

score 1 · Answer 1 · answered Nov 24 '14 at 16:54

Look at http://jsfiddle.net/xnxgm1m6/2/

$(document).ready(function(e){
$("#selectall").click(function(){
    var b = false;
    if($(this).is(":checked"))
        b = true;
    $("#table").find("tr").each(function(){
        $(this).find('input[type="checkbox"]').each(function() {
            $(this).prop("checked", b);
            var id=$(this).attr("id").split('_')[1];
            if(b)
                $("#table tr:nth-child(" + id + ")").addClass('active');
            else $("#table tr:nth-child(" + id + ")").removeClass('active');
            //DON'T KNOW WHAT THIS IS FOR
           // $("table.DTFC_Cloned>tbody tr:nth-child(" + id_row + ")").addClass('active');
        //funcChechboxes('{{ path('user_session_set')}}',id,'single');

        });
    });
});

I think is what you want. Hope that helps.

Thanks @telmo-silva , I will give it a try later today and I will post the results !!! Looks very promising !!! :D — Mario Salgado, Nov 24 '14 at 17:54

score 1 · Answer 2 · answered Nov 25 '14 at 01:55

Finally I got it: Since I'm using DataTable fixedColumns, this api cloned my table (yep, now I've got 2 tables!), and I was pointing to the wrong table (the clone has the checkboxes now).

So the final working code is this:

$('#all').on('click', function () {
    if($(this).is(':checked')){
            $("table.DTFC_Cloned>tbody").find("input[type='checkbox']").each( function() {
                $(this).prop("checked", true).change();
                var id=$(this).attr("id").split('_')[1];
                var id_row=table.row("#row_"+id).index()+1;
                $("#tabla_equipos tr:nth-child(" + id_row + ")").addClass('active');
                $("table.DTFC_Cloned>tbody tr:nth-child(" + id_row + ")").addClass('active');
                funcChechboxes('{{ path('user_session_set')}}',id);
            });
        }else{

Thanks for the help guys!

Hey you saved my life, I tried to find a solution in the whole internet, I am using FixedColumns and checkboxes, I will try what you said you should publish it in FixedColumns documentation as a fix, are u brazilian? @Mario Salgado — Roger Oliveira, Oct 21 '15 at 03:35

score 0 · Answer 3 · answered Sep 22 '17 at 22:13

0

This can be solved with.

$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');

See this thread for more info.

answered Sep 22 '17 at 22:13

Olmstov

563
7
18

JQuery Checkboxes do not change visual state at .prop("checked", true)

3 Answers3