'Change 'checked' property of checkbox using jQuery and bootstrap (AdminLTE theme)

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>

enter image description here

(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.

javascriptjqueryhtmlcsstwitter-bootstrap


Solution 1:[1]

try below code

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

Solution 2:[2]

how about plain old-fashioned javascript?

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

Solution 3:[3]

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

here's a fiddle for it.

Solution 4:[4]

Try this

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

I hope this will help you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dev
Solution 2 lucas
Solution 3 Kyle Emmanuel
Solution 4 Muhammad Tahseen ur Rehman

Related Questions