Question

我正在使用Fuelux Checkbox组件，我正在尝试根据选中的复选框切换一些DIV。我这样做：

$(document).ready(function(){
    $('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").toggle(!this.checked);
        $("#rifSucursal").toggle(this.checked);
    });

    $('#chkRif').on('checked.fu.checkbox', function () {
        $("#rifEmpresa").toggle(!this.checked);
    });
});

但无法正常工作，因为#rifEmpresa始终显示无论是否选中了复选框。正确的方法应该是：

选中第一个可见的复选框“Click me”
隐藏#rifEmpresa DIV并立即显示#rifSucursal，但第一个不是隐藏
在 RIF 复选框

#rifEmpresa

这是相关的HTML代码：

<form enctype="multipart/form-data" id="registroEmpresa" role="form" class="form-horizontal" method="POST">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <div id="chkSucursal" data-initialize="checkbox" class="checkbox highlight">
                    <div class="col-xs-4 control-label"><strong>Check me</strong>
                    </div>
                    <div class="col-md-6 col-sm-4 checkbox">
                        <label class="checkbox-custom">
                            <input type="checkbox" id="sucursal" name="sucursal" value="1" class="sr-only">
                        </label>
                    </div>
                </div>
            </div>
            <div style="display: none;" id="rifSucursal" class="form-group">
                <div class="row">
                    <label class="col-sm-4 control-label">Find company<span class="text-danger">(*)</span>
                    </label>
                    <div class="col-md-6 col-sm-4">Some FORM element to Show</div>
                </div>
                <div class="row">
                    <div id="chkRif" data-initialize="checkbox" class="checkbox highlight">
                        <div class="col-xs-4 control-label"><strong>RIF?</strong>
                        </div>
                        <div class="col-md-6 col-sm-4 checkbox">
                            <label class="checkbox-custom">
                                <input type="checkbox" id="chkRif" name="chkRif" value="1" class="sr-only"> <span class="checkbox-label">(check me to show "Some Form Element to HIDE")</span>

                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="rifEmpresa" class="form-group has-feedback">
                <label class="col-xs-4 control-label">RIF <span class="text-danger">(*)</span>
                </label>
                <div class="col-md-6 col-sm-4">Some FORM element to Hide</div>
            </div>
        </div>
    </div>
</form>

可以给我一些帮助并告诉我我做错了什么以及如何修复我的代码？ Here是一个简单的小提琴，用于测试目的

Answer 1

试试这个

http://jsfiddle.net/31roa5hz/2/

$(document).ready(function(){
    $('html').addClass('fuelux');

    $('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").hide('slow');
        $("#rifSucursal").show('slow');
    });


    $('#chkSucursal').on('unchecked.fu.checkbox', function (evt, item) {
        $("#rifEmpresa").show('slow');
        $("#rifSucursal").hide('slow');
    });


    $('#chkRif').on('checked.fu.checkbox', function () {
        $("#rifEmpresa").show('slow');
    });

        $('#chkRif').on('unchecked.fu.checkbox', function () {
        $("#rifEmpresa").hide('slow');
    });

});

我认为您使用的控件没有任何已检查的属性，我试图知道是否使用.is（＆＃39;：checked＆＃39;）来检查该元素是否已被检查返回undefined。所以我认为更新的代码对你来说更好，因为你正在使用的UI控件有自己的自定义事件可以捕获。

Answer 2

你应该能够这样做： $('input').on('change', checkboxChanged);

像普通复选框一样。如果你不能，那就是一个错误，你可能想尝试签出/ bower install #master，因为我们一直在修改复选框控件over the past two weeks。

我知道在Fuel UX 3.4.0中没有设置checked属性。

选中复选框上的切换元素

2 个答案: