简体   繁体   中英

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

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/

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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM