CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Procrastinating Programmer
Procrastinating Programmer

Reputation: 314

Checkbox of inner div not being checked JQuery Bootstrap

Consider this code sample below:

This works

<div class="row">
    <div>
        <input type="checkbox" id="checkbox3" />
    </div>
</div>

But when I add the class it does not work

<div class="row">
    <div class="checkbox i-checks">
        <input type="checkbox" id="checkbox3" />
    </div>
</div>

Jquery code below

$('#checkbox3').prop('checked', true);

I am trying to check a checkbox of an inner div using JQuery. The checkbox is in an inner div( many layers of nesting) and is a different bootstrap class from the parents. I am trying to check the check box of inner div, however unable to check it. How do I set the checkbox of inner div of a different class.

I am using the below to import the styles

@Scripts.Render("~/plugins/iCheck")


$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
});

Styles:

@section Styles {
    @Styles.Render("~/Content/plugins/iCheck/iCheckStyles")
}

Upvotes: 1

Views: 55

Answers (2)

Procrastinating Programmer
Procrastinating Programmer

Reputation: 314

I found the solution, but I will post it here in case someone needs it in future.

I added the below to the JQuery

.icheck('update')

$('#checkbox3').prop('checked', true).iCheck('update');

Adding the below for reference

http://icheck.fronteed.com/

Upvotes: 2

Namig Ismayilov
Namig Ismayilov

Reputation: 121

It actually does work when you add class

$(document).ready(function(){
   $('#checkbox3').prop('checked', true
   );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="row">
    <div class="checkbox i-checks">
        <input type="checkbox" id="checkbox3" />
    </div>
</div>
</body>
</html>

Upvotes: 0

Related Questions