638

I already tried all the possible ways, but I still didn't get it working. I have a modal window with a checkbox I want that when the modal opens, the checkbox check or uncheck should be based on a database value. (I have that already working with others form fields.) I started trying to get it checked but it didn't work.

My HTML div:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

and the jQuery:

$("#estado_cat").prop( "checked", true );

I also tried with attr, and others seen here in the forums, but none seem to work.
Can someone point me the right way?


EDIT

OK, I'm really missing something here. I can check/uncheck using code if the check box is in the page, but is it's in the modal window, I can't. I tried dozens of different ways.

I have a link that's supposed to open the modal:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

and jQuery to "listen" the click and execute some operations like filling some text boxes with data coming from database. Everything works like I want but the problem is that I can't set checkbox checked/unchecked using code. Help please!

$(function () {
    $(".editButton").click(function () {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "process.php",
            dataType: "json",
            data: {
                id: id,
                op: "edit"
            },
        }).done(function (data) {
            // The next two lines work fine,
            // i.e. it grabs the value from database and fills the textboxes
            $("#nome_categoria").val(data['nome_categoria']);
            $("#descricao_categoria").val(data['descricao_categoria']);

            // Then I tried to set the checkbox checked (because it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });

        evt.preventDefault();
        return false;
    });
});
2
  • what class is applied on modal div when the modal opens ? Also how do you check the database value - Using AJAX or is it already pre-fetched and stored in a variable ? Feb 23, 2013 at 19:07
  • set check box after loading modal window I think you are setting the check box before loading the modal window. $('#fModal').modal('show'); $("#estado_cat").attr("checked","checked"); Mar 10, 2014 at 18:00

19 Answers 19

1044

you have to use the 'prop' function :

.prop('checked', true);

Before jQuery 1.6 (see user2063626's answer):

.attr('checked','checked')
5
  • 7
    You seem to have the correct answer. Could you elaborate? stackoverflow.com/a/5876747/29182
    – Ziggy
    Dec 10, 2013 at 14:29
  • 1
    This is good to know. Overlooked this when going through the migration documentation of jQuery 3.3.x Jun 11, 2018 at 6:39
  • 2
    Good to know that you can not use attr in the newer versions of jQuery as I initially thought
    – Kaloyan
    Dec 20, 2018 at 14:16
  • @Kaloyan I wish I too had known... Could've and would've saved me a lot of time. Dec 25, 2021 at 19:49
  • 1
    This is correct. After jQuery 1.6, .attr() still has most of the same functionality, but there are a few nuanced situations where it will fail and you need to use .prop() to be 100% covered.
    – Justin
    Sep 28, 2022 at 13:20
94

Taking all of the proposed answers and applying them to my situation - trying to check or uncheck a checkbox based on a retrieved value of true (should check the box) or false (should not check the box) - I tried all of the above and found that using .prop("checked", true) and .prop("checked", false) were the correct solution.

I can't add comments or up answers yet, but I felt this was important enough to add to the conversation.

Here is the longhand code for a fullcalendar modification that says if the retrieved value "allDay" is true, then check the checkbox with ID "even_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}
4
  • 54
    Why not just on one single line? $( "#even_allday_yn").prop('checked', allDay); Oct 23, 2014 at 14:43
  • 6
    He was trying to demonstrate the possible values. How would you know the real value of the "allDay" without an example like this one here? Jan 30, 2017 at 2:00
  • 1
    @Xavier Hayoz. This works if, and only if, allDay returns 'true' or 'false' as a litteral value — not a pure binary one. Checkboxes ar badly designed in html and their checked status can be expressed in very different ways. The safe and only one way I know of is: allDay === 'true' ? $('#even_allday_yn).prop ("checked", true): $('#even_allday_yn).prop ("checked", false). Notice the strict equality operator. Apr 27, 2017 at 8:46
  • 1
    $('#even_allday_yn').prop('checked', allDay === true) will work because allDay === true gives a boolean result. Oct 24, 2017 at 8:45
90

Try below code :

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);
6
  • 41
    As in KeyOfJ's answer, use .prop('checked', true) instead of attr - I just ran into the same issue, and prop works. Oct 16, 2013 at 20:45
  • 5
    FYI if you want to make use of the :checked pseudo-selector or other native checkbox HTML features, you must use .prop.
    – benastan
    Nov 14, 2013 at 0:57
  • 1
    Tried this and it didn't work but when I changed the code to $("div.row-form #estado_cat").prop("checked","checked"); it did work. (Changed attr to prop).
    – Jim Evans
    Mar 4, 2014 at 16:01
  • 1
    Unfortunately prop is jQuery 1.6 and higher, so if you are stuck in a legacy framework that won't work for you Jan 16, 2015 at 22:03
  • .attr() is the way to go for earlier versions, .prop() for jQuery 1.6+.
    – vapcguy
    Jul 1, 2015 at 19:07
32

"checked" attribute 'ticks' the checkbox as soon as it exists. So to check/uncheck a checkbox you have to set/unset the attribute.

For checking the box:

$('#myCheckbox').attr('checked', 'checked');

For unchecking the box:

$('#myCheckbox').removeAttr('checked');

For testing the checked status:

if ($('#myCheckbox').is(':checked'))

Hope it helps...

23

Since you are in a modal window (whether dynamic or in the page) you can use the following code to accomplish your goal: (I ran into the same problem on my site and this is how I fixed it)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

CODE:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

In the above "kendoWindow" is my window (mine is dynamic, but I also do this when appending to an element directly in the page). I am looping through an array of data ("queriesToAddToGroup") to see if any rows have an attribute of COPY. If so I want to turn on the checkbox within the window that sets that attribute when a user saves from this window.

1
  • 4
    It should be noted that while other answers to the question at hand may "work", using prop as this answer suggests is the CORRECT way of accomplishing dynamic jQuery checkbox checking/un-checking. Aug 14, 2013 at 23:03
14

I know this asks for a Jquery solution, but I just thought I'd point out that it is very easy to toggle this in plain javascript.

var element = document.getElementById("estado_cat");
element.checked = true;

It will work in all current and future versions.

1
  • 2
    I think sometimes we forget some of the more basic things are much better using raw js.
    – LarryBud
    Feb 11, 2021 at 19:35
11
.attr("checked",true)
.attr("checked",false)

will work.Make sure true and false are not inside quotes.

2
  • 3
    Attr won't check the checkbox, prop is the one to do the check. Like .prop('checked', true); More info in this Post Oct 8, 2014 at 22:08
  • @casivaagustin Depends on the jQuery version. I believe earlier than jQuery 1.6, .attr() did work, as described.
    – vapcguy
    Jul 1, 2015 at 19:09
7

If you're wanting to use this functionality for a GreaseMonkey script to automatically check a checkbox on a page, keep in mind that simply setting the checked property may not trigger the associated action. In that case, "clicking" the checkbox probably will (and set the checked property as well).

$("#id").click()
1
  • 1
    Because the checkbox has functionality that goes with it, this is the clean way of setting it as checked and let the associated logic run accordingly. There's a strong case to be made for this to be the accepted answer
    – Gene Bo
    Apr 26, 2021 at 1:22
5

You can write like below given code.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

Hope it work for you.

5
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>
0
4

Worked for me:

$checkbok.prop({checked: true});
1
  • user $("#estado_cat").attr("checked","checked"); Mar 10, 2014 at 17:23
3
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find will return array , so use [0] to get even if there is only one item

if you don't use find then

$("#subclip_checkbox").checked=true;

this worked fine in Mozilla Firefox for me

1
  • 1
    This works, all other solutions doesn't get detected if you have a :checked style in your css
    – bhappy
    Nov 4, 2015 at 19:05
2

Have you tried running $("#estado_cat").checkboxradio("refresh") on your checkbox?

2

This works.

 $("div.row-form input[type='checkbox']").attr('checked','checked');
2

I encountered this problem too.

and here is my old doesn't work code

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

here is my new code which is worked now:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

so,the key point is before it worked ,make sure the checked property does exist and does not been removed.

1
  • Much simplier: Jbookaccess.prop("checked", data.access != 'private');
    – Legionar
    Jun 6, 2016 at 8:43
2

This occurs because you with the newest version of jquery attr('checked') returns 'checked' while prop('checked') returns true.

1

Try this since your are using jQuery UI probably (if not please comment)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });
0
1

Set the check box after loading the modal window. I think you are setting the check box before loading the page.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
0
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

Remember to increment the the id and for attribute respectively. For Dynamically added bootstrap check box.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})

Not the answer you're looking for? Browse other questions tagged or ask your own question.