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   lt div id  quot fModal quot  class  quot modal quot   gt               lt div class  quot row-form quot  gt           lt div class  quot span12 quot  gt               lt span class  quot top title quot  gt Estado lt  span gt                           lt input type  quot checkbox quot   id  quot estado cat quot  class  quot ibtn quot  gt          lt  div gt       lt  div gt                lt  div gt   and the jQuery     quot  estado cat quot   prop   quot checked quot   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   lt a href     data-id   quot   row  id cat    quot   class  editButton icon-pencil  gt  lt  a gt   and jQuery to  quot listen quot  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             quot  editButton quot   click function              var id     this  data  id              ajax               type   quot POST quot               url   quot process php quot               dataType   quot json quot               data                    id  id                  op   quot edit quot                            done function  data                   The next two lines work fine                 i e  it grabs the value from database and fills the textboxes                quot  nome categoria quot   val data  nome categoria                    quot  descricao categoria quot   val data  descricao categoria                     Then I tried to set the checkbox checked  because it s unchecked by default                 and it does not work                quot  estado cat quot   prop  quot checked quot   true                   fModal   modal  show                                 evt preventDefault            return false

User · Answer

lt body gt         lt input id  IsActive  name  IsActive  type  checkbox  value  false  gt   lt  body gt    lt script gt          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            lt  script gt

User · Answer

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

User · Answer

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

User · Answer

lt div class  custom-control custom-switch  gt         lt input type  checkbox  class  custom-control-input  name  quiz answer  id  customSwitch0  gt         lt label class  custom-control-label  for  customSwitch0  gt  lt span class  fa fa-minus fa-lg mt-1  gt  lt  span gt  lt  label gt     lt  div gt    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  gt  span   remove        let current toggle   parent find   custom-control-input   attr  id        if       current toggle     prop  checked      true           parent find   custom-control-label   append   lt span class  fa fa-check fa-lg mt-1  gt  lt  span gt               else if       current toggle     prop  checked      false           parent find   custom-control-label   append   lt span class  fa fa-minus fa-lg mt-1  gt  lt  span gt

User · Answer

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

User · Answer

This works       div row-form input type  checkbox     attr  checked   checked

User · Answer

Dude 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

User · Answer

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

User · Answer

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

User · Answer

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  quot estado cat quot    element checked   1   It will work in all current and future versions

User · Answer

Have you tried running     estado cat   checkboxradio  refresh   on your checkbox

User · Answer

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

User · Answer

you have to use the  prop  function      prop  checked   true     Before jQuery 1 6  see user2063626 s answer     attr  checked   checked

User · Answer

You can write like below given code   HTML   lt input type  checkbox   id  estado cat  class  ibtn  gt    jQuery    document  ready function            ibtn   click function                ibtn   attr  checked    checked                  Hope it work for you

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  content-container  style  text-align  right   gt       lt input type  checkbox  id  QueryGroupCopyQueries  gt       lt label for  QueryGroupCopyQueries  gt Create Copies lt  label gt                                                      lt  div gt    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

User · Answer

attr  checked  true   attr  checked  false    will work Make sure true and false are not inside quotes

User · Answer

Worked for me    checkbok prop  checked  true

[jquery] jQuery set checkbox checked

Examples related to jquery

Examples related to checkbox