iCheck change skin when changed

Question

I'm working with iCheck and I'd like to modify the element skin whenever its state changes (e.g. grey for unchecked and green for checked). Here's what I've tried so far:

    <!-- the html element I'm trying to change -->
    <input type="checkbox" name="status" id="status" class="icheck">
    <label for="status">Active</label>


    //initializing fields
    $('.icheck').each(function() {
        var self = $(this),
            label = self.next(),
            label_text = label.text();

        label.remove();
        self.iCheck({
            checkboxClass: 'icheckbox_line-grey',
            radioClass: 'iradio_line-grey',
            insert: '<div class="icheck_line-icon"></div>' + label_text
        });
    });

    //how I'm trying to make it work
    $('.icheck').on('ifChanged', function() {
        var self = $(this);
        var label = self.parent();
        var label_text = label.text();
        var checkboxClass;
        var radioClass;

        if (label_text == 'Ativado') {
            checkboxClass = 'icheckbox_line-grey';
            radioClass = 'iradio_line-grey';
            label_text = 'Desativado'
        } else if (label_text == 'Desativado') {
            checkboxClass = 'icheckbox_line-green';
            radioClass = 'iradio_line-green';
            label_text = 'Ativado'
        }

        self.iCheck({
            checkboxClass: checkboxClass,
            radioClass: radioClass,
            insert: '<div class="icheck_line-icon"></div>' + label_text
        });
    });

However, the code above manages to change the element skin only once.

What am I missing here in order to make it work?

Answer 1

Within the ifChanged event you update the iCheck.

Refer to:

self.iCheck({
    checkboxClass: checkboxClass,
    radioClass: radioClass,
    insert: '<div class="icheck_line-icon"></div>' + label_text
});

Now, your ifChanged event does not work anymore because a new element (iCheck) is created on the fly to replace the old one. Hence you need a different event binding: delegation:

$(document).on('ifChanged', 'input.icheck', function() {

Moreover, because you start with an inactive state you need to change this line:

<label for="status">Active</label>

to:

<label for="status">Inactive</label>

//initializing fields
$('.icheck').each(function() {
    var self = $(this),
            label = self.next(),
            label_text = label.text();

    label.remove();
    self.iCheck({
        checkboxClass: 'icheckbox_line-grey',
        radioClass: 'iradio_line-grey',
        insert: '<div class="icheck_line-icon"></div>' + label_text
    });
});

//how I tried to make it work
$(document).on('ifChanged', 'input.icheck', function() {
    var self = $(this);
    var label = self.parent();
    var label_text = label.text();
    var checkboxClass;
    var radioClass;

    if (label_text == 'Active') {
        checkboxClass = 'icheckbox_line-grey';
        radioClass = 'iradio_line-grey';
        label_text = 'Inactive'
    } else if (label_text == 'Inactive') {
        checkboxClass = 'icheckbox_line-green';
        radioClass = 'iradio_line-green';
        label_text = 'Active'
    }

    self.iCheck({
        checkboxClass: checkboxClass,
        radioClass: radioClass,
        insert: '<div class="icheck_line-icon"></div>' + label_text
    });
}).trigger('ifChanged');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>


<input type="checkbox" name="status" id="status" class="icheck">
<label for="status">Inactive</label>