Question

我正在使用Bootstrap和FontAwesome的组合来创建一些触摸可访问的复选框控件。作为复选框的文本标签的一部分，我想包含指向另一个页面的链接，但它似乎不起作用。我猜测在引导问题的Bootstrap JavaScript中有一个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

我在此处更新了您的示例：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>

Answer 2

提供的链接cbrawl有解决方案。下面的jquery解决了我的问题，谢谢！

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

允许在Bootstrap复选框文本中单击链接

2 个答案: