複選框選中的切換元素選中

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不工作時總是顯示不管是檢查還是沒有什麼複選框。特正確的方式應該是：

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> 

任何能給我一些幫助，告訴我，我做錯了什麼，以及如何解決我的代碼？ 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（'：checked'）它返回未定義。所以我認爲更新的代碼對你更好，因爲你使用的UI控件有自己的可以捕獲的自定義事件。

Answer 2

你應該能夠做到這一點： $('input').on('change', checkboxChanged);

像一個正常的複選框。如果你不能，這是一個錯誤，你可能想嘗試檢查/涼亭安裝#master，因爲我們已經錯誤修復複選框控制over the past two weeks。

我知道在Fuel UX 3.4.0中沒有設置checked屬性。