iCheck and manual setting of checkbox to checked

Question

I'm using the iCheck framework and I have two inputs

<input name="group" id="id1" type="radio" checked>
<input name="group" id="id2" type="radio">
<input name="group" id="id3" type="radio">
<input name="group" id="id4" type="radio">

On click I call an ajax function. If something fail, I want to set back the checked attribute to the previously selected input.

var currentChecked = $("input[name='group']:radio:checked");

$("input[name='group']:radio").each(function() {
        $(this).on('ifChecked', function(){
               $.ajax({
                    url: "/ajax/something/"
                })
                .done(function (data) {
                    currentChecked = $(this);
                })
                .fail(function (data) {
                    $(this).removeAttr('checked');
                    currentChecked.prop('checked', true);
                });
 });
});

But this will not reset the checked checkbox. There is something I don't see from the iCheck framework? Any solution?

score 25 · Answer 1 · answered Sep 23 '17 at 21:36

Actually in case of iCheck You need to update the iCheck to reflect the changes on Jquery.

You can update using iCheck('update')

$(this).iCheck('update');

After checked or unchecked the radio button using jquery.

Another Solution just check or uncheck the iCheck using his predefined function.

<input name="group" id="id1" type="radio" checked>

If the above one is your radio button you can use the code in jquery section like below

$('#id1').iCheck('uncheck'); //To uncheck the radio button
$('#id1').iCheck('check'); //To check the radio button

In this case no need to use the iCheck('update')

score 2 · Answer 2 · answered May 27 '16 at 23:15

jQuery iCheck works bit different from the way you expect.

When you initialize a checkbox or radio button, it picks up the status/value of the control and builds the look and feel of that state. That is all. Then it never checks your control value or any update to its attributes.

So the only way to uncheck your checkbox in the Ajax failure event, is by using the functions exposed by the plugin.

You should use following in your ajax fail event to change the state back to previous

$(this).iCheck('toggle');

or you can change the html attributes and refresh the control like below

$(this).removeAttr('checked');
currentChecked.prop('checked', true);
$(this).iCheck('update'); — apply input changes, which were done outside the plugin

score 1 · Answer 3 · answered Apr 16 '19 at 07:07

Below solution worked for me in iCheck v1.0.2. You can check iCheck radio by filtering radio button group like below

Using 'id' of element

$('input:radio[name="group"]').filter('[id="id1"]').iCheck('check');

Using 'value'

$('input:radio[name="group"]').filter('[value="id1"]').iCheck('check');

you can replace 'id' or 'value' dynamically base on your requirement/functionality. and you can change 'check' or 'uncheck' inside .iCheck('check').

Pran · Answer 4 · 2020-03-12T07:15:28.653

0

//this will update all iCheck fields inside the selected form
$('#form_id :radio').iCheck('update');

edited Mar 12 '20 at 07:15

answered Mar 12 '20 at 06:15

Pran

1,679
20
23

1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Igor F. Mar 12 '20 at 06:51

iCheck and manual setting of checkbox to checked

4 Answers4