使用jquery icheck插件显示隐藏div

Question

我使用iCheck Jquery插件 For Beautify复选框。现在，我需要show/hide div后使用jquery复选框，但这不适用于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>

联署材料：

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

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

我该怎么解决这个问题？

NOTE: if disable icheck plugin, jquery show/hide worked But after enabled icheck jquery not work.

JSFIDDLE演示

Answer 1

您必须使用ifChanged：

更改输入的检查、禁用或不确定状态

事件是由插件触发的，请考虑插件通过添加元素来更改DOM，因此开始的HTML结构略有改变。

在插件调用之后，您的元素将不会有一个名为.max_tickets的同级，但它是它的父元素的同级。

代码：

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

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

Answer 2

我刚刚检查了你给iCheck插件的链接。它与复选框的交互方式是使用div包装复选框，并添加其他项和一些样式，因此您的$(this).next('.max_tickets')选择器现在不能作为新的父选项。

插件将此转换为

<li>
   <input tabindex="1" type="checkbox" id="input-1">
   <label for="input-1">Checkbox, <span>#input-1</span></label>
</li>

到这个

<li>
    <div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false"><input tabindex="1" type="checkbox" id="input-1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div>
    <label for="input-1" class="">Checkbox, <span>#input-1</span></label>
</li>

因此，您需要做的是找到一种选择div.max_tickect的新方法，我建议您的代码使用div包装，并从这个父类中找到您的div。请检查以上代码；

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


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

应该为你工作。

显然，iCheck会覆盖默认事件。请试着使用下面的活页夹。

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

Answer 3

您可以在ICheck插件中定义回调。

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