Переключить элемент на отмеченном флажке

Я использую компонент 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 всегда отображается независимо от того, какой флажок установлен или нет. Правильный путь должен быть:

  1. Установите первый видимый флажок «Нажмите на меня».
  2. Скрыть #rifEmpresa DIV и показать #rifSucursal прямо сейчас, это показать, но первый не скрыть
  3. Переключить #rifEmpresa на флажок RIF? установлен

Это связанный 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>

Может ли кто-нибудь помочь мне и сказать, что я делаю неправильно и как исправить мой код? Вот простой Fiddle для тестирования.


javascript checkbox html jquery fuelux
person ReynierPM    schedule 19.12.2014    source источник
comment
Попробуйте #rifEmpresa:checked ...   -  person rfornal    schedule 19.12.2014
comment
это потому, что this внутри обработчика событий не является элементом флажка   -  person Arun P Johny    schedule 19.12.2014
comment
Вместо this.checked попробуйте ... $(***).is(":checked") ... *** должен быть элементом флажка   -  person rfornal    schedule 19.12.2014
comment
@ArunPJohny так? Мне нужно полагаться на .show()/.hide()?   -  person ReynierPM    schedule 19.12.2014
comment
@rfornal Я обновил код в скрипке и не работает, не могли бы вы взглянуть ?   -  person ReynierPM    schedule 19.12.2014
comment
@ReynierPM, это не сработает, поскольку используемый вами идентификатор элемента управления не является фактическим идентификатором вашего флажка. это идентификатор Div, а не идентификатор флажка.   -  person Rohit Batra    schedule 19.12.2014

Ответы (2)


arrow_upward
0
arrow_downward

попробуй это

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(':checked'), он возвращает undefined. поэтому я думаю, что обновленный код лучше для вас, поскольку используемый вами элемент управления пользовательским интерфейсом имеет свои собственные настраиваемые события, которые можно захватить.

person Rohit Batra    schedule 19.12.2014

arrow_upward
0
arrow_downward

Вы должны быть в состоянии сделать это: $('input').on('change', checkboxChanged);

Как обычный флажок. Если вы не можете, это ошибка, и вы можете попробовать проверить/установить bower #master, так как мы исправили ошибку элемента управления флажком за последние две недели.

Я знаю, что атрибут checked не устанавливался в Fuel UX 3.4.0.

person Interactive Llama    schedule 19.12.2014