iCheck更改皮肤时更改答案

【问题标题】：iCheck change skin when changediCheck更改皮肤时更改
【发布时间】：2017-08-29 22:13:43
【问题描述】：

我正在使用 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
        });
    });

然而，上面的代码只改变了元素皮肤一次。

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

【问题讨论】：

标签： jquery icheck

【解决方案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>

【讨论】：