javascript - 使用 jquery icheck 插件显示隐藏的 div

Question

我与 iCheck Jquery Plugin 一起工作对于美化选择/复选框。现在我需要在使用 jquery 选中复选框后 show/hide div 但这不适用于 icheck 插件。

HTML:

<input tabindex="5" type="checkbox" id="minimal-checkbox-1">test
<div class="max_tickets">
    <input type="text" name="opwp_wootickets[tickets][0][maxtickets]" />
</div>

JS:

$('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%'
});

$('input[type="checkbox"]').change(function(){
    $(this).next('.max_tickets').toggle(this.checked);
}).change();

我该如何解决这个问题？

注意:如果禁用 icheck 插件，jquery show/hide 工作但启用 icheck jquery 后不工作。

JSFIDDLE DEMO

Answer 1

您必须使用 ifChanged :

input's checked, disabled or indeterminate state is changed

该事件由插件触发，考虑到插件通过添加其元素更改了 DOM，因此您的起始 HTML 结构发生了一些变化。

在插件调用之后，您的元素将不会有名为 .max_tickets 的兄弟元素，但它是其父元素的兄弟元素。

代码:

$('input').on('ifChanged', function () {
    $(this).parent().next('.max_tickets').toggle(this.checked);
});

演示:http://jsfiddle.net/IrvinDominin/p5UgK/