Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery set checkbox checked

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;     }); }); 
like image 269
psopa Avatar asked Feb 23 '13 18:02

psopa


People also ask

How do you set checkbox is checked or not in jQuery?

To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);

How can I get dynamic checkbox checked value in jQuery?

$('#envoyer'). click(function(e){ var myArray = new Array(3); for ( var j = 0; j < 3; j++) { var check=$('input:checkbox[name=checkbox'+j+']').is(':checked'); if(check==true) myArray[j]=$('input:checkbox[name=checkbox'+j+']'). val(); // Alert Current Selection // alert('check ' + " " + myArray[j] ); } });


2 Answers

you have to use the 'prop' function :

.prop('checked', true); 

Before jQuery 1.6 (see user2063626's answer):

.attr('checked','checked') 
like image 60
singe Batteur Avatar answered Sep 19 '22 16:09

singe Batteur


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); } 
like image 30
eriknoyes Avatar answered Sep 18 '22 16:09

eriknoyes