引導複選框進入TabPanel選項卡不檢查/取消選中

問題在於選項卡面板選項卡內的複選框未檢查。引導複選框進入TabPanel選項卡不檢查/取消選中

JSFiddle link

HTML代碼在這裏：

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"> 
     <a href="#home"> 
      <div style="margin: 0;" class="checkbox"> 
       <label style="float: left;"> 
        <input style="display: inline-block;" type="checkbox" id="product" value="home" /> 
        <div style="display: inline-block;">Home</div> 
       </label> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#profiles"> 
      <div style="margin: 0;" class="checkbox"> 
       <label style="float: left;"> 
        <input style="display: inline-block;" type="checkbox" id="product" value="profiles" /> 
        <div style="display: inline-block;">Profiles</div> 
       </label> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#messages"> 
      <div style="margin: 0;" class="checkbox"> 
       <label style="float: left;"> 
        <input style="display: inline-block;" type="checkbox" id="product" value="messages" /> 
        <div style="display: inline-block;">Messages</div> 
       </label> 
      </div> 
     </a> 
    </li> 
</ul>

任何想法？我怎樣才能使這些複選框做檢查和取消選中功能？

來源

2014-07-17 Toms Bugna

爲什麼每個複選框都有相同的ID？ –

因爲這只是一個例子。將ID更改爲唯一不會給我所需的結果。 –

Bunga：檢查我的答案。和是的id應該是唯一的。 –

你阻止了它一下。刪除e.preventDefault()將解決問題

來源

2014-07-17 09:58:18 hrskrs

只能刪除該行，當您移動到其他選項卡時，不會取消選中您的複選框。 –

YOUE jQuery的是

$('#myTab li').click(function (e) { 
// e.preventDefault(); 
    $(this).find('a').tab('show'); 
// $(this).tab('show'); 
    $(this).closest('ul').find('input[type="checkbox"]').prop('checked',''); 
    $(this).closest('li').find('input[type="checkbox"]').prop('checked','checked'); 

});

DEMO

來源

2014-07-17 09:51:13

注意到Chrome中的錯誤，初始化後，您可以在直接單擊複選框時在標籤之間切換，但該複選框未激活，當在標籤標題上第一次點擊時問題得到解決，而不是在標籤之間切換的複選框 – ins0

@湯姆斯：這實際上是因爲我已經在錨標籤「」的點擊事件中編寫了此代碼。如果你想在複選框上，那麼你可以做到這一點。等待我將更新我的答案。 –