Разрешить нажимать ссылку в бутстрапе Checkbox Text

Question

Я использую комбинацию Bootstrap и FontAwesome для создания элементов управления флажками с сенсорным доступом. Как часть текстовой метки для флажка, я хотел бы включить ссылку на другую страницу, но она, похоже, не работает. Я предполагаю, что в JavaScript Bootstrap, вызывающем эту проблему, происходит вызов stopPropagation(), но я не могу найти способ обойти это. Мой HTML-код приведен ниже.

<div class="btn-touch btn-group btn-group-vertical" data-toggle="buttons"> 
    <label class="btn" for="cbAgree"> 
     <input id="cbAgree" type="checkbox" name="cbAgree" /> 
     <i class="fa fa-square-o fa-2x"></i> 
     <i class="fa fa-check-square-o fa-2x"></i> 
     <span>I agree to the <a href='http://www.google.com' target='_blank'>Terms & Conditions</a></span> 
    </label> 
</div> 

Вот скрипка, что лучше иллюстрирует МГС: https://jsfiddle.net/bepsh3wt/

Answer 1

ссылка cbrawl предоставила решение. ниже jquery решил мою проблему, спасибо!

$('.btn-touch').on('click', 'label a', function (e) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    window.open($(this).attr('href'), $(this).attr('target')); 
    return false; 
}); 

Answer 2

Я обновил свой пример здесь: https://jsfiddle.net/bepsh3wt/4/

Необходим <form> тегов и, возможно, вы можете скрыть вход: флажок

<div class="btn-touch btn-group btn-group-vertical" data-toggle="buttons"> 
<form> 
    <label class="btn" for="MainContent_MainContent_lvTrip_cbYCJAgree_0"> 
     <input id="MainContent_MainContent_lvTrip_cbYCJAgree_0" type="checkbox" name="ctl00$ctl00$MainContent$MainContent$lvTrip$ctrl0$cbYCJAgree" /> 
     <i class="fa fa-square-o fa-2x"></i> 
     <i class="fa fa-check-square-o fa-2x"></i> 
     <span>I agree to the <a href='/Terms' target='_blank'>Terms & Conditions</a></span> 
    </label> 
</form> 
</div>