Question

我使用iCheck Jquery Plugin 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>

JS：

$('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 DEMO

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

使用jquery icheck插件show hide div

3 个答案: