I'm using the AdminLTE theme (which implements bootstrap) and I have a checkbox on my page. It gets rendered as follows -

<div class="icheckbox_minimal" style="position: relative;" aria-checked="false" aria-disabled="false">
<input id="subscribeAddress" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>

(note how a sprite is used to display the checkbox, while the actual input element is given an opacity of 0)

I now wish to change the checked property of the checkbox with jQuery. How would I go about doing this? I have tried the following without any luck -

$("#subscribeAddress").prop("checked", true);

$(".icheckbox_minimal").prop("aria-checked", true);

Update: I have found a solution to my question and posted an answer below, but am still open to suggestions on better approaches.

I'm using the AdminLTE theme (which implements bootstrap) and I have a checkbox on my page. It gets rendered as follows -

<div class="icheckbox_minimal" style="position: relative;" aria-checked="false" aria-disabled="false">
<input id="subscribeAddress" type="checkbox" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>

(note how a sprite is used to display the checkbox, while the actual input element is given an opacity of 0)

I now wish to change the checked property of the checkbox with jQuery. How would I go about doing this? I have tried the following without any luck -

$("#subscribeAddress").prop("checked", true);

$(".icheckbox_minimal").prop("aria-checked", true);

Update: I have found a solution to my question and posted an answer below, but am still open to suggestions on better approaches.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 20, 2014 at 3:50 Paul McLean asked Aug 20, 2014 at 2:49 Paul McLeanPaul McLean 3,57066 gold badges2727 silver badges3636 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

try below code

$("#subscribeAddress").iCheck('uncheck');

how about plain old-fashioned javascript?

document.getElementById("subscribeAddress").checked = true;

$("#subscribeAddress").prop("checked", true); works fine.

here's a fiddle for it.

Try this

$('#checkAll').on('ifChanged', function(event){
    if(this.checked){
        $('input').iCheck('check')
    }
    else{
        $('input').iCheck('uncheck')
    }
})

I hope this will help you.

It seems that adding the "checked" class to div of class "icheckbox_minimal" is what I was looking for.

Is directly modifying this div considered to be the correct way to do this? Or should I be another way?

I'll leave my question unanswered for a little while, to give someone a chance to supply a better answer (if one exists). I feel like marking my own answer is cheating :p