iCheck改变皮肤

Question

我正在使用iCheck，每当元素的状态发生变化时，我想要修改它(例如，灰色表示未选中，绿色表示选中)。到目前为止，我尝试过的是：

    <!-- 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
        });
    });

但是，上面的代码只能更改元素外观一次。

我在这里遗漏了什么才能让它发挥作用？

Answer 1

在ifChanged事件中更新iCheck。

请参阅：

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

现在，您的ifChanged事件不再工作了，因为会动态创建一个新元素(iCheck)来替换旧元素。因此，您需要一个不同的事件绑定:委托：

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

此外，由于您以非活动状态开始，所以需要更改这一行：

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

至：

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

​