jQuery set checkbox checked

Question

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;
    });
});

Answer 1

you have to use the 'prop' function :

.prop('checked', true);

Before jQuery 1.6 (see user2063626's answer):

.attr('checked','checked')

Answer 2

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);
}

Answer 3

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);

Answer 4

"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...

Answer 5

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.

Answer 6

.attr("checked",true)
.attr("checked",false)

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

Answer 7

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.

Answer 8

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.

Answer 9

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()

Answer 10

<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>

Answer 11

$("#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

Answer 12

Worked for me:

$checkbok.prop({checked: true});

Answer 13

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');

    }
   });

Answer 14

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

Answer 15

This works.

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

Answer 16

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.

Answer 17

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

Answer 18

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");

Answer 19

<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>');
    }
})