Search code examples
jqueryicheck

jquery change attribute of icheck plugin


I have this code to style a checkbox using the iCheck plugin for jquery, is there a way to change the 'insert' attribute later?. I tried recreating the iCheck but the callback function is deleted if I do it that way.

$(this).iCheck({
    checkboxClass: checkboxClass,
    insert: '<div class="icheck_line-icon"></div>' + $(this).attr("data-label")
});

$(this).on({ifChecked: function(){
    iCheckChange(this, yes);
},ifUnchecked: function(){
    iCheckChange(this, no);
}
});

Solution

  • Lets say you have checkboxes in this format:

    <input type="checkbox" class="my_checkbox" data-label="Check me" />
    

    Than you can change your icon and text this way:

    var checkboxClass = 'checkbox_cls';
    $('.my_checkbox').each(function(i) {
        var thisCheckbox=$(this);
        thisCheckbox.iCheck({
            checkboxClass: checkboxClass,
            insert: '<div class="icheck_line-icon"></div><span class="insert_label">' + thisCheckbox.data("label") + '</span>'
        });
        var thisIcon = thisCheckbox.siblings('.icheck_line-icon');
        var thisLabel = thisCheckbox.siblings('.insert_label');
        thisCheckbox.on('ifChecked', function(e){
            thisIcon.addClass('icon-checked');
            thisLabel.html('Im checked');
        });
        thisCheckbox.on('ifUnchecked', function(e){
            thisIcon.removeClass('icon-checked');
            thisLabel.html('Not checked');
        });
    });
    

    Take a look at this Fiddle.